Qt6 QML Book/Quick入门/简单变换

Simple Transformations

简单的变换

A transformation manipulates the geometry of an object. QML Items can, in general, be translated, rotated and scaled. There is a simple form of these operations and a more advanced way.

变换操作改变元素对象的几何形状。QML项可以做翻转、旋转和缩放操作。操作方法分为简单变换和高级变换。

Let’s start with the simple transformations. Here is our scene as our starting point.

我们从简单变换开始。

A simple translation is done via changing the x,y position. A rotation is done using the rotation property. The value is provided in degrees (0 .. 360). A scaling is done using the scale property and a value <1 means the element is scaled down and >1 means the element is scaled up. Rotation and scaling do not change an item's geometry: the x,y and width/height haven’t changed; only the painting instructions are transformed.

简单的平移是通过改变x,y的值来实现。旋转是使用旋转（rotation）属性完成的。取值范围0-360。缩放是使用缩放（scale）属性完成的，当取值小于1时，表示缩小，当取值大于1时，表示放大。旋转和缩放不会改变元素对象放置属性（如原本的x,y和宽度width/高度height没有改变），只是最终显示的绘制结果变了。

Before we show off the example I would like to introduce a little helper: the ClickableImage element. The ClickableImage is just an image with a mouse area. This brings up a useful rule of thumb - if you have copied a chunk of code three times, extract it into a component.

在展示示例子前，我先简单介绍一下ClickableImage元素类型。ClickableImage是一个带有鼠标区域的图像。这里一条有用的经验法则——如果一段代码复制了三次以上，那么将它导出到一个组件文件中。

// ClickableImage.qml
// Simple image which can be clicked

import QtQuick

Image {
    id: root
    signal clicked

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

We use our clickable image to present three objects (box, circle, triangle). Each object performs a simple transformation when clicked. Clicking the background will reset the scene.

使用可点击图像显示三个对象(框、圆、三角形)。当单击对象时，每个对象执行一个简单的变换。点击背景时，将整个场景重置。

// TransformationExample.qml

import QtQuick

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 重置场景
            circle.x = 84
            box.rotation = 0
            triangle.rotation = 0
            triangle.scale = 1.0
        }
    }

    ClickableImage {
        id: circle
        x: 84; y: 68
        source: "assets/circle_blue.png"
        antialiasing: true
        onClicked: {
            // increase the x-position on click 单击时增加x坐标
            x += 20
        }
    }

    ClickableImage {
        id: box
        x: 164; y: 68
        source: "assets/box_green.png"
        antialiasing: true
        onClicked: {
            // increase the rotation on click 点击时，增加旋转度数
            rotation += 15
        }
    }

    ClickableImage {
        id: triangle
        x: 248; y: 68
        source: "assets/triangle_red.png"
        antialiasing: true
        onClicked: {
            // several transformations 复合变换
            rotation += 15
            scale += 0.05
        }
    }
    
    // ...

The circle increments the x-position on each click and the box will rotate on each click. The triangle will rotate and scale the image up on each click, to demonstrate a combined transformation. For the scaling and rotation operation we set antialiasing: true to enable anti-aliasing, which is switched off (same as the clipping property clip) for performance reasons. In your own work, when you see some rasterized edges in your graphics, then you should probably switch smoothing on.

圆圈对象会在每次点击时，增加x坐标，方块对象会在每次点击时，增加旋转度数。三角形对象将在每次单击时，同时旋转和缩放图像（组合转换）。对缩放和旋转操作，我们设置antialiasing: true，来启用抗锯齿，出于性能原因，它默认关闭(与剪切属性clip类似)。在自己的项目中，若看到图形中有一些栅格化的边缘，可以使用该属性平滑下。

TIP

注

To achieve better visual quality when scaling images, it is recommended to scale down instead of up. Scaling an image up with a larger scaling factor will result in scaling artifacts (blurred image). When scaling an image you should consider using smooth: true to enable the usage of a higher quality filter at the cost of performance.

为了在缩放图像时，获得好的视觉效果，建议将图像缩小而不是放大。过度放大图像将导致失真(图像变模糊)。缩放图像时，应该考虑使用smooth: true，以获得高质量的图像，但会牺牲性能为代价。

The background MouseArea covers the whole background and resets the object values.

背景MouseArea覆盖整个背景，并重置对象的值。

TIP

注

Elements which appear earlier in the code have a lower stacking order (called z-order). If you click long enough on circle you will see it moves below box. The z-order can also be manipulated by the z property of an Item.

代码中，出现早的元素对象，具有较低的堆叠顺序(称为z值)。如果在圆上点击次数足够多，会看到它移动到方框下面。z值也可以通过Item的z属性来操作。

This is because box appears later in the code. The same applies also to mouse areas. A mouse area later in the code will overlap (and thus grab the mouse events) of a mouse area earlier in the code.

这是因为代码中，框出现的早。同样的道理也适用于鼠标区域。代码中，后出现的鼠标区域将重叠在先出现的鼠标区域之上(从而后出现的鼠标区域，可以获取鼠标事件)。

Please remember: the order of elements in the document matters.

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

示例源码下载