当前位置: 首页 > article >正文

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 clicked

import QtQuick 2.0

Image {
    id: root
    signal clicked

    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}

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

// transformation.qml


import QtQuick 2.0

Item {
    // set width based on given background
    width: bg.width
    height: bg.height

    Image { // nice background image
        id: bg
        source: "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 events
        anchors.fill: parent
        onClicked: {
            // reset our little scene
            rocket1.x = 20
            rocket2.rotation = 0
            rocket3.rotation = 0
            rocket3.scale = 1.0
        }
    }

    ClickableImage {
        id: rocket1
        x: 20; y: 100
        source: "assets/rocket.png"
        onClicked: {
            // increase the x-position on click
            x += 5
        }
    }

    ClickableImage {
        id: rocket2
        x: 140; y: 100
        source: "assets/rocket.png"
        smooth: true // need antialising
        onClicked: {
            // increase the rotation on click
            rotation += 5
        }
    }

    ClickableImage {
        id: rocket3
        x: 240; y: 100
        source: "assets/rocket.png"
        smooth: true // need antialising
        onClicked: {
            // several transformations
            rotation += 5
            scale -= 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.kler.cn/a/355100.html

相关文章:

  • EsChatPro 接入国内 DeepSeek 大模型
  • Mac Android studio 升级LadyBug 版本,所产生的bug
  • 对文件内的文件名生成目录,方便查阅
  • 一网多平面
  • 使用strimzi-kafka-operator 的mirrormake2(mm2)迁移kafka集群,去掉目标集群的topic默认前缀
  • springboot vue 会员营销系统
  • MongoDB 死锁 锁定问题
  • 【C++】unordered_set、unordered_map超详细封装过程,处理底层细节
  • 算法笔记 C/C++快速入门 | 全章节整理
  • 『Mysql集群』Mysql高可用集群之主从复制 (一)
  • 【Java基础】常用类方法记录
  • Python 使用 Jarvis 算法或包装的凸包(Convex Hull using Jarvis’ Algorithm or Wrapping)
  • Unknown column ‘oMIbw5H29LXtmAUjSSm7ZrymASUI‘ in ‘where clause‘
  • 前端技巧汇总
  • 驱动总裁免登陆单文件版
  • 网页前端开发之HTML入门篇:标题标签 heading
  • Leetcode 1223 LCA of Deepest TreeNode
  • 带头结点的单链表按数据域从小到大进行选择排序的算法
  • 生成器和迭代器
  • Mysql 5.7 安装与卸载(非常详细)
  • 【原创】java+springboot+mysql智能农村管理系统设计与实现
  • OpenUAV:首个专为现实无人机视觉语言导航设计的大规模轨迹数据集,由大约 12k 个轨迹组成,涵盖了多种环境和复杂的飞行动态。
  • laravel清除不同缓存
  • 疾病防控|基于springBoot的疾病防控综合系统设计与实现(附项目源码+论文+数据库)
  • 海康相机
  • 通信学习干货:运营商为什么要大力推广FTTR?