QT QML 练习8-Simple Transformations

在这里插入图片描述

  1. 简单的转换(Simple Transformations)
    转换操作改变了一个对象的几何状态。QML元素对象通常能够被平移,旋转,缩放。下面我们将讲解这些简单的操作和一些更高级的用法。 我们先从一个简单的转换开始。用下面的场景作为我们学习的开始。

简单的位移是通过改变x,y坐标来完成的。旋转是改变rotation(旋转)属性来完成的,这个值使用角度作为单位(0~360)。缩放是通过改变scale(比例)的属性来完成的,小于1意味着缩小,大于1意味着放大。旋转与缩放不会改变对象的几何形状,对象的x,y(坐标)与width/height(宽/高)也类似。只有绘制指令是被转换的对象。

在我们展示例子之前我想要介绍一些东西:ClickableImage元素(ClickableImage element),ClickableImage仅仅是一个包含鼠标区域的图像元素。我们遵循一个简单的原则,三次使用相同的代码描述一个用户界面最好可以抽象为一个组件。

// ClickableImage.qml// Simple image which can be clickedimport QtQuick 2.0Image {id: rootsignal clickedMouseArea {anchors.fill: parentonClicked: root.clicked()}
}

我们使用我们可点击图片元素来显示了三个火箭。当点击时,每个火箭执行一种简单的转换。点击背景将会重置场景。

// transformation.qmlimport QtQuick 2.0Item {// set width based on given backgroundwidth: bg.widthheight: bg.heightImage { // nice background imageid: bgsource: "assets/background.png"}MouseArea {id: backgroundClicker// needs to be before the images as order matters// otherwise this mousearea would be before the other elements// and consume the mouse eventsanchors.fill: parentonClicked: {// reset our little scenerocket1.x = 20rocket2.rotation = 0rocket3.rotation = 0rocket3.scale = 1.0}}ClickableImage {id: rocket1x: 20; y: 100source: "assets/rocket.png"onClicked: {// increase the x-position on clickx += 5}}ClickableImage {id: rocket2x: 140; y: 100source: "assets/rocket.png"smooth: true // need antialisingonClicked: {// increase the rotation on clickrotation += 5}}ClickableImage {id: rocket3x: 240; y: 100source: "assets/rocket.png"smooth: true // need antialisingonClicked: {// several transformationsrotation += 5scale -= 0.05}}
}

火箭1在每次点击后X轴坐标增加5像素,火箭2每次点击后会旋转。火箭3每次点击后会缩小。对于缩放和旋转操作我们都设置了smooth:true来增加反锯齿,由于性能的原因通常是被关闭的(与剪裁属性clip类似)。当你看到你的图形中出现锯齿时,你可能就需要打开平滑(smooth)。

注意

为了获得更好的显示效果,当缩放图片时推荐使用已缩放的图片来替代,过量的放大可能会导致图片模糊不清。当你在缩放图片时你最好考虑使用smooth:true来提高图片显示质量。

使用MouseArea来覆盖整个背景,点击背景可以初始化火箭的值。

注意

在代码中先出现的元素有更低的堆叠顺序(叫做z顺序值z-order),如果你点击火箭1足够多次,你会看见火箭1移动到了火箭2下面。z轴顺序也可以使用元素对象的z-property来控制。

由于火箭2后出现在代码中,火箭2将会放在火箭1上面。这同样适用于MouseArea(鼠标区域),一个后出现在代码中的鼠标区域将会与之前的鼠标区域重叠,后出现的鼠标区域才能捕捉到鼠标事件。

请记住:文档中元素的顺序很重要。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/56300.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt- QSS风格选择器常用属性选择器样式表盒子

1. 风格设置 Qt 提供了 3 种整体风格,使用 QStyleFactory::keys() 来获取 (windowsvista 、Windows 、Fusion) 可以在 main.cpp 中调用 setStyle 方法对应用程序进行全局风格的设置 int main(int argc, char *argv[]) {QApplication a(arg…

Redis协议详解及其异步应用

目录 一、Redis Pipeline(管道)概述优点使用场景工作原理Pipeline 的基本操作步骤C 示例(使用 [hiredis](https://github.com/redis/hiredis) 库) 二、Redis 事务概述事务的前提事务特征(ACID 分析)WATCH 命…

用Python实现图片转ASCII艺术:图像处理与字符艺术的完美结合

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 ASCII艺术是一种通过字符来表现图像的艺术形式,最早用于早期计算机显示器,它仅支持字符显示。如今,尽管图像分辨率和显示技术得到了极大的提升,ASCII艺术作为一种复古而别具一格的图像表现形式,仍然受到许多…

驱动开发系列21 - 编译内核模块的Makefile解释

一:内核模块Makefile #这一行定义了要编译的内核模块目标文件。obj-m表示目标模块对象文件(.o文件), #并指定了两个模块源文件:helloworld-params.c 和 helloworld.c。最终会生成这 #这两个.c文件的.o对象文件。 obj-m := helloworld-params.o helloworld.o#这行定义了内核…

爱快路由器配置腾讯云动态域名DDNS详细说明

直白点说就是让爱快路由器自动配置当前公网IP地址给域名,动态域名DDNS不清楚的请自行百度, 这里就可以看见操作日志,那么我们一步一步来配置它吧,首先登录爱快路由器,如下图: 那么腾讯云我们怎么找到ID和…

koa知否论坛交流系统的设计与实现---附源码53933

目 录 1 绪论 1.1研究背景 1.2研究意义 1.3论文结构与章节安排 2 知否论坛交流系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2.4本章小…

Spring Boot环境下的大创项目质量保证系统

3系统分析 3.1可行性分析 通过对本大创管理系统实行的目的初步调查和分析,提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本大创管理系统采用SSM框架,JAVA作为开发语言&#…

鸿蒙OS启动流程

启动流程(基于openharmony4.1) 系统上电加载内核后,按照以下流程完成系统各个服务和应用的启动: 内核加载init进程,一般在bootloader启动内核时通过设置内核的cmdline来指定init的位置。init进程启动后,会挂载tmpfs,…

宝塔PHP8.1安装fileinfo拓展失败解决办法

在宝塔面板中安装PHP8.1后,安装fileinfo扩展一直安装不上,查看日志有报错,于是手动来安装也报错。 宝塔报错: 手动命令行编译安装同,也有报错 cd /www/server/php/81/src/ext/fileinfo/ make distclean ./configure …

MongoDB初学者入门教学:与MySQL的对比理解

🏝️ 博主介绍 大家好,我是一个搬砖的农民工,很高兴认识大家 😊 ~ 👨‍🎓 个人介绍:本人是一名后端Java开发工程师,坐标北京 ~ 🎉 感谢关注 📖 一起学习 &…

Oracle 数据库中游标的入门到精通

一、游标入门知识 (一)游标是什么 在 Oracle 数据库中,游标是一种处理结果集的机制。当执行一个查询语句后,结果集可能包含多行数据。游标就像是一个指向这些数据行的指针,允许我们逐行对数据进行操作和处理&#xf…

020 elasticsearch7.10.2 elasticsearch-head kibana安装

文章目录 全文检索流程ElasticSearch介绍ElasticSearch应用场景elasticsearch安装允许远程访问设置vm.max_map_count 的值 elasticsearch-head允许跨域 kibana 商品数量超千万,数据库无法使用索引 如何使用全文检索: 使用lucene,在java中唯一…

MySQL 的数据类型

1.整数类型 1.1 tinyint tinyint 为小整数类型,存储空间为1个字节(8位),有符号范围-128 ~ 127,无符号范围 0 ~ 255,此类型通常在数据库中表示类型的字段,如某一字段 type 表示学科,其中 “type1” 表示语文…

什么是芯片正向设计和芯片反向设计?

什么是芯片反向设计?反向设计其实就是芯片反向设计,它是通过对芯片内部电路的提取与分析、整理,实现对芯片技术原理、设计思路、工艺制造、结构机制等方面的深入洞悉,可用来验证设计框架或者分析信息流在技术上的问题,…

C++学习,标准库 <functional>

C 标准库 <functional> 头文件提供了一组函数模板&#xff0c;这些模板允许使用函数对象&#xff08;function objects&#xff09;作为参数传递给算法&#xff0c;或者作为算法的返回值。函数对象是那些重载了 operator() 的对象&#xff0c;它们可以像普通函数一样被调…

004、合并两个有序数组

0、题目描述 合并两个有序数组 1、法1 数组nums1有m个元素&#xff0c; 直接在下标为m的位置处追加nums2的元素。然后再qsort整体排序。 —— —— qsort函数&#xff0c;&#xff08;数组首元素地址&#xff0c;排序的个数&#xff0c;排序元素大小&#xff0c; 比较函数&…

要创建一个带有vue的uniAPP需要具备什么资质

要创建一个带有Vue的UniApp&#xff0c;主要需要的是技术能力和相关开发经验&#xff0c;而非特定的资质证书。不过&#xff0c;从一般性的角度来看&#xff0c;以下是创建此类应用时可能需要考虑的一些方面&#xff1a; 一、技术能力 Vue.js基础&#xff1a; 熟悉Vue.js的语法…

从零实现高并发内存池

目录 1. 项目介绍1.1 这个项目具体功能是什么&#xff1f;1.2 本项目的知识储备 2. 什么是内存池2.1 池化技术2.2 内存池主要解决的问题2.3 malloc 3. 定长内存池设计4. 高并发内存池整体框架设计4.1 Thread Cache的设计思路4.2 Central Cache的设计思路4.3 Page Cache的设计思…

Vue工程化结构环境安装及搭建教程 : 之nvm

vue需要的环境&#xff1a; node.js : Node.js和Vue.js通常会一起使用。Node.js作为后端服务器&#xff0c;处理服务器端的逻辑和数据访问&#xff0c;而Vue.js则负责前端用户界面的构建和交互。通过Ajax通信&#xff0c;Vue.js应用程序向Node.js服务器发送请求&#xff0c;并…

【知识科普】单元测试框架TestNG介绍

文章目录 TestNG概述常用注解说明springboot项目集成比较完整的示例步骤 1: 创建被测试的类步骤 2: 编写TestNG测试用例步骤 3: 运行测试步骤 4: 查看测试报告 TestNG概述 TestNG是一个开源的自动化测试框架&#xff0c;它在JUnit和NUnit的基础上增加了很多强大的功能&#xf…