Qt quick基础2（包含平移旋转放缩以及qml控件大写开头啊）

Qt quick基础2（包含平移旋转放缩以及qml控件大写开头啊）

前言

上一个教程我们已经讲述了基本元素Text Image Rectangle的使用，并且其中也涉及了Mousearea鼠标区域，本节仍然是针对基本元素的学习和实践，以作后续回顾之用。

上一篇链接：【五一创作】Qt quick基础1（包含基本元素Text Image Rectangle的使用）_ADi_hhh的博客-CSDN博客

简单的平移、旋转和放缩

• 平移是通过改变x,y的位置来实现的
• 旋转通过rotation属性，该值为0~360
• 放缩通过scale属性实现，<1代表缩小，>1代表放大。

为了更好地与图片交互，重新创建一个定义的“可点击图片”元素，该元素基于Image元素创建。

在项目处新建文件夹，命名为“Components”

在“Components”文件夹中，点击“新建”，点击新建文件，创建qml文件，命名为“ClickableImage.qml”

修改CMakeList文件，加入新创建的文件

在ClickableImage.qml文件中写入以下代码：

import QtQuick

//simple image which can be clicked
Image{
    id:root1
    signal clicked
    MouseArea{
        anchors.fill: parent
        onClicked: root1.clicked()
    }

}

上面代码依据Image元素创建，后续利用ClickableImage元素创建图片，图片就是可以点击的了。

在main.qml中写入以下代码，并在前面加上import "components"

  Image{
        id:bg
        source:"https://ts1.cn.mm.bing.net/th/id/R-C.13881c555584a29d4d2f3788232ef730?rik=jkE1V0bQyMVOaA&riu=http%3a%2f%2fimg.mm4000.com%2ffile%2f4%2f31%2f65b9d39e84.jpg&ehk=dnq80Zih3kNPSCZoSNF3ET6kWi0vN40flGVN1QP458I%3d&risl=&pid=ImgRaw&r=0"
    } //背景图片
    MouseArea{
        id:bgclicker
        anchors.fill: parent
        onClicked: {
            cat.x =12
            beauty.x =150
            beauty.rotation =0
            beauty.scale =1.0

        } //鼠标区域，点击这一区域，图片归位
    }
 
 ClickableImage{
        id:cat
        x:12;y:250
        source: "https://ts1.cn.mm.bing.net/th/id/R-C.c1ef7c28ec0c3a03671bf8c5b84824a9?rik=gtgH8z39ogolSA&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f230101%2f1_010120010R534.jpg&ehk=%2bP%2fA9Bc1Xw28uBxAFWEP0qGpscER%2bd8hq%2flkynX4qUw%3d&risl=&pid=ImgRaw&r=0"
        //可以加载网页图片
        antialiasing: true //抗锯齿,图片过渡更加平滑
        onClicked: {
            x+=20// x方向平移
        }
    }
    ClickableImage{
        id:beauty
        x:150;y:350
        source: "https://ts1.cn.mm.bing.net/th/id/R-C.6ea41fdad2fdbe324a84b6b68969ae4d?rik=nsNtS0in5lEFjw&riu=http%3a%2f%2fimg.touxiangwu.com%2fuploads%2fallimg%2f221229%2f1_12291Q03140R.jpg&ehk=Irzz7kT29gRfpRgrn7Z7KipUPsJuV6HR0yZGdyFD41M%3d&risl=&pid=ImgRaw&r=0"
        //可以加载网页图片
        antialiasing: true
        onClicked: {
            x+=20
            rotation +=15 //旋转
            scale -=0.05 //放缩
        }
    }

上面的图片都是我使用网络上的图片，其中的Mousearea是保证在点击窗口其他位置时，图片会恢复到初始状态；第一张图片id为cat，点击后会发生x方向上的平移；第二张图片id为beauty，点击后会发生x方向上的平移，顺时针的旋转以及缩小5%。

编译运行，结果如下：

注意在点击空白区域时，两张图片都恢复到最开始的状态了。

其他元素的一些基本使用

可以使用property限定符向新元素添加新属性，后跟类型、名称和可选的初始值

property<类型><名称>：<值>

声明属性的另一种重要方式是使用别名关键字

property alias<名称>：<引用>

property alias 赵子龙：赵云

视觉元素是如Rectangle这样的，具有几何形状

非视觉元素如Timer提供一般功能，通常用于控制视觉元素

Item是所有视觉元素的基础元素，因此其他所有视觉元素都从Item继承。他本身并不绘制任何东西，但定义了所有视觉元素的共同属性

qml文件作为控件时，务必以大写字母开头命名

今天我就遇到了这样一个问题，当以小写字母开头命名时，使用这个元素控件怎么也不成功，但是重建一个文件以大写字母开头命名就成功了，原谅我的无知。

小结

本文主要介绍了简单的变换包括平移旋转和缩放，以及一些其他的元素使用基本规范和自己踩的一个坑，本来还想要介绍文本输入TextEdit等以及锚定anchor 和Positioning相关的内容，但写的有些杂乱，还是遇到的时候在代码中回顾吧，所以就把仅有的一部分内容发出来了，下一节将会继续介绍动画相关的内容。

如果您觉得我写的不错，麻烦给我一个免费的赞！如果内容中有错误，也欢迎向我反馈。