QML之五：简单转换

目录

转换

---

转换

转换操作改变了一个对象的几何状态。

QML 元素对象通常能够被平移，旋转，缩放：

• 位移是通过改变 x,y 坐标来完成的

• 旋转是改变 rotation（旋转）属性来完成的，这个值使用角度作为单位（0~360）

• 缩放是通过改变 scale（比例）的属性来完成的，小于1意味着缩小，大于1意味着放大

旋转与缩放不会改变对象的几何形状，对象的 x,y（坐标）与 width,height（宽/高）也类似，只有绘制指令是被转换的对象。

首先创建一个组件 ClickableImage：

// ClickableImage.qml
​
import QtQuick 2.0
​
Image {
    id: root
    signal clicked
​
    MouseArea {
        anchors.fill: parent
        onClicked: root.clicked()
    }
}

使用组件：

import QtQuick 2.2
import QtQuick.Window 2.2
​
Window{
    height: 600;width: 800
​
    Item {
        anchors.fill: parent
​
        Image { // nice background image
            id: bg
            source: "./sky.png"
            anchors.fill: parent
        }
​
        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 = 300
                rocket2.rotation = 0
                rocket3.rotation = 0
                rocket3.scale = 1.0
            }
        }
​
        ClickableImage {
            id: rocket1
            x: 300; y: 100
            source: "./rocket.png"
            onClicked: {
                // increase the x-position on click
                x += 20
            }
        }
​
        ClickableImage {
            id: rocket2
            x: 300; y: 300
            source: "./rocket.png"
            smooth: true // need antialising
            onClicked: {
                // increase the rotation on click
                rotation += 10
            }
        }
​
        ClickableImage {
            id: rocket3
            x: 300; y: 500
            source: "./rocket.png"
            smooth: true // need antialising
            onClicked: {
                // several transformations
                scale -= 0.05
            }
        }
    }
}

运行：

• smooth:true 来增加反锯齿，由于性能的原因通常是被关闭的（与剪裁属性 clip 类似）。当你看到你的图形中出现锯齿时，你可能就需要打开平滑

注意：

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