Qt quick基础2(包含平移旋转放缩以及qml控件大写开头啊)
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:root1signal clickedMouseArea{anchors.fill: parentonClicked: root1.clicked()}}
上面代码依据Image元素创建,后续利用ClickableImage
元素创建图片,图片就是可以点击的了。
在main.qml中写入以下代码,并在前面加上import "components"
Image{id:bgsource:"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:bgclickeranchors.fill: parentonClicked: {cat.x =12beauty.x =150beauty.rotation =0beauty.scale =1.0} //鼠标区域,点击这一区域,图片归位}ClickableImage{id:catx:12;y:250source: "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:beautyx:150;y:350source: "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: trueonClicked: {x+=20rotation +=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相关的内容,但写的有些杂乱,还是遇到的时候在代码中回顾吧,所以就把仅有的一部分内容发出来了,下一节将会继续介绍动画相关的内容。
如果您觉得我写的不错,麻烦给我一个免费的赞!如果内容中有错误,也欢迎向我反馈。
Qt quick基础2(包含平移旋转放缩以及qml控件大写开头啊)相关推荐
- 【五一创作】Qt quick基础1(包含基本元素Text Image Rectangle的使用)
Qt quick基础1(包含基本元素Text Image Rectangle的使用) 目录 Qt quick基础1(包含基本元素Text Image Rectangle的使用) 前言 qt中有直接设计 ...
- 【Qt开发笔记】Qt自定义控件开发与使用,自定义控件实现容器与控件内布局
1.开发环境 Qt版本:Qt 4.8.7 编译器:MinGw 系统:Windows 2.创建Qt4自定义控件 创建一个Qt自定义控件工程. 工程名为Custom. 控件类取名Custom. 然后完成创 ...
- 【Qt教程】3.1 - Qt5 event事件、Label控件的鼠标事件捕获
1. event简介 事件(event)是由系统或者Qt本身在不同的时刻发出的.当用户按下鼠标.敲下键盘,或者是窗口需要重新绘制的时候,都会发出一个相应的事件.一些事件在对用户操作做出响应时发出,如键 ...
- QT窗口:透明与半透明、不规则异形窗口、控件透明与半透明、不规则异形按钮
目录 1.不规则异形窗口和控件的代码原理 2.主窗口全透明 3.主窗口半透明(以白里透红为例) 4.不规则异形窗口 5.不规则异形按钮 6.使用样式表实现透明与半透明 1.不规则异形窗口和控件的代码原 ...
- qt中根据数据解析的结果动态的创建控件并布局
引言 有时候程序中的控件的个数是无法预测的,当程序启动时,根据解析的数据动态的创建n行m列的控件,并为其布局.下面记录一下动态创建控件,并布局. 运行效果 示例 此示例主要是从json配置文件中读取参 ...
- qt设置边框颜色_Qt开源作品14-导航按钮控件
## 一.前言 导航按钮控件,主要用于各种漂亮精美的导航条,我们经常在web中看到导航条都非常精美,都是html+css+js实现的,还自带动画过度效果,Qt提供的qss其实也是无敌的,支持基本上所有 ...
- qt在表格中如何画线_Qt之表格控件蚂蚁线
阅读目录 回到顶部 一.蚂蚁线 摘自互动百科:在图像影像软件中表示选区的动态虚线,因为虚线闪烁的样子像是一群蚂蚁在跑,所以俗称蚂蚁线.在Poshop,After Effect等软件中比较常见. 背景: ...
- qt中利用普通函数将调用ui界面的控件
一.新建qt程序,界面如图所示: 二.在.h文件中: #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #in ...
- QT如何修改[设计师界面类]的名称(窗口或控件名字)?
当使用向导创建设计师界面类以后,如下图所示: 这样QT会为我们生成3个文件:.cpp..hpp..ui. 但是修改这个类名,就有点麻烦了,稍有不慎,就会编译报出一些莫名其妙的错误.要修改的地方有这么几 ...
最新文章
- PHPNow升级PHP版本为5.3.5的方法
- Hibernate主键生成种类
- 【LoadRunner】OSGI性能测试实例
- MySQL解压缩安装
- boost::program_options模块实现使用命令行和配置文件的测试程序
- python旅游推荐系统_如何用Python搭建一个简单的推荐系统?
- python内循环只执行一次_如何1分钟内从3600只股种选出黑马股,仅分享这一次(太透彻了)...
- 不同DPI下窗体的自适应的有关注意点(转)
- Spark机器学习(3):保序回归算法
- 吴恩达机器学习(九)Precision、Recall、F-score、TPR、FPR、TNR、FNR、AUC、Accuracy
- 计算机视觉基础:图像处理 Task 04:图像滤波
- slam 无人车 融合imu 后手动调整小车位姿,不受里程计影响
- SpringBoot启动o.s.b.d.LoggingFailure… 错误解决方法
- 集客家客运维那些事_全网独家汇总!通信工程原理、设备知识大全(2018)
- python 小程序——快递分拣程序
- mathquill web公式编辑器 总结 、实列、 源码
- java该选择哪个城市_逃离北上广,java程序员又能选择哪些城市呢?
- 好员工为什么离你而去
- 2022国赛新大陆物联网Ubuntu系统维护(中职)
- 电子时钟c语言课题介绍,电子时钟开题报告
热门文章
- android自动屏幕点击事件,Android 中屏幕点击事件的实现
- 该把优惠券发送给哪些用户?一文读懂Uplift模型
- [K/3Cloud]关于选单操作
- Flink SQL CDC 13 条生产实践经验
- gcc ------ 编译与链接选项及CFLAGS、LDFLAGS、LIBS
- POJ 3126 Prime Path(BFS + 素数打表)
- 学习笔记—Vue项目启动时卡在98% after emitting CopyPlugin的问题解决
- Unity3D-实现第一人称人物动作: 走,跑,跳,移动视角
- 使用 git tag 给项目打标签
- 解决Powershell前面没有base,无法激活虚拟环境问题