QT QML 练习8-Simple Transformations

news/2024/10/15 21:11:12/

在这里插入图片描述

  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.ppmy.cn/news/1539618.html

相关文章

C++20那些事之constexpr与comma expr

C20那些事之constexpr与comma expr C20 引入了多项新特性,进一步增强了编译时能力和代码安全性。本文将深入探讨两项重要的变更:constexpr 函数中的异常处理以及下标运算符中逗号运算符的弃用。 注:懒人版,本节的代码示例与相关文…

【氮化镓】低温对p-GaN HEMT迁移率、阈值电压和亚阈值摆幅的影响

本期分享一篇低温对p-GaN HEMT 迁移率、阈值电压和亚阈值摆幅影响进行表征和建模的研究论文。文章作者Shivendra Kumar Singh、Thien Sao Ngo、Tian-Li Wu(通讯作者)和Yogesh Singh Chauhan,分别来资源中国台湾阳明交通大学国际半导体技术学院、印度理工学院坎普尔分校电气工…

多层嵌套json字符串(jsonStr)写入redis

1、连接redis Jedis jedis new Jedis("localhost", 6379); 2、将字符串转为json格式 JSONObject jsJSONObject.fromObject(jsonStr); 3、对json格式进行解析 4、将json写入redis public static void RedisSet(JSONObject js,Jedis js01){ //获取json中的所有ke…

大模型推理框架选型调研

文章目录 背景选型评估指标推理性能推理优化支持程度易用性与学习成本可持续维护性技术兼容性 技术备选老牌新贵 分析TensorRT-LLMNvidia Triton Inference ServerTensorRT-LLM 与 vLLM 对比 建议与结论 背景 公司需要新增了 GPU 机器自部署大模型服务用于支撑 AI 业务。目前市…

边缘计算网关助力软件开发商轻松对接各类工业硬件设备

近年来,工业互联网蓬勃发展,软件开发商面临着如何快速、高效地对接种类繁多的工业硬件设备的巨大挑战。传统方法不仅开发周期长、成本高,而且维护难度大。OkEdge边缘计算网关的出现,为软件开发商提供了一种全新的解决方案&#xf…

【MySQL数据库】MySQL事务

文章目录 MySQL事务事务的四个基本特性(ACID)1. 原子性(Atomicity)2. 一致性(Consistency)3. 隔离性(Isolation)4. 持久性(Durability) 事务的应用场景事务的…

uniapp学习(004-1 组件 Part.1)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第26p-第p30的内容 文章目录 uniapp和vue差异对比写几个组件并且引用props传值添加类型约束约束类型并且添加默…

【宝可梦】游戏

pokemmo https://pokemmo.com/zh/ 写在最后:若本文章对您有帮助,请点个赞啦 ٩(๑•̀ω•́๑)۶