Qt quick基础2（包含平移旋转放缩以及qml控件大写开头啊）
目录
- Qt quick基础2（包含平移旋转放缩以及qml控件大写开头啊）
- 前言
- 简单的平移、旋转和放缩
- 其他元素的一些基本使用
- 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相关的内容，但写的有些杂乱，还是遇到的时候在代码中回顾吧，所以就把仅有的一部分内容发出来了，下一节将会继续介绍动画相关的内容。
如果您觉得我写的不错，麻烦给我一个免费的赞！如果内容中有错误，也欢迎向我反馈。
