Qt6 QML Book/画布/基本变换

Transformation

基本变换

The canvas allows you to transform the coordinate system in several ways. This is very similar to the transformation offered by QML items. You have the possibility to scale, rotate, translate the coordinate system. Indifference to QML the transform origin is always the canvas origin. For example to scale a path around its center you would need to translate the canvas origin to the center of the path. It is also possible to apply a more complex transformation using the transform method.

画布允许您以多种方式变换坐标系。这与QML项提供的基本变换非常相似。您可以缩放scale、旋转rotate、平移translate坐标系。与QML不同，变换原点始终是画布原点。例如，要围绕路径中心缩放路径，需要将画布原点移动为路径中心。也可以使用基本变换方法应用更复杂的变换。

import QtQuick

Canvas {
    id: root
    width: 240; height: 120
    onPaint: {
        var ctx = getContext("2d")
            var ctx = getContext("2d");
            ctx.lineWidth = 4;
            ctx.strokeStyle = "blue";

            // translate x/y coordinate system
            ctx.translate(root.width/2, root.height/2);

            // draw path
            ctx.beginPath();
            ctx.rect(-20, -20, 40, 40);
            ctx.stroke();

            // rotate coordinate system
            ctx.rotate(Math.PI/4);
            ctx.strokeStyle = "green";

            // draw path
            ctx.beginPath();
            ctx.rect(-20, -20, 40, 40);
            ctx.stroke();
    }
}

Besides translate the canvas allows also to scale using scale(x,y) around x and y-axis, to rotate using rotate(angle), where the angle is given in radius (360 degree = 2*Math.PI) and to use a matrix transformation using the setTransform(m11, m12, m21, m22, dx, dy).

除平移外，画布还允许使用scale(x,y)围绕x轴和y轴进行缩放，使用rotate(angle)进行旋转，其中角度以弧度（360度=2*Math.PI）表示，并使用setTransform(m11, m12, m21, m22, dx, dy)进行矩阵变换。

TIP

注

To reset any transformation you can call the resetTransform() function to set the transformation matrix back to the identity matrix:

要重置任何变换，可以调用resetTransform（）函数将转换矩阵设置回单位矩阵：

ctx.resetTransform()

 示例源码下载