Преобразования в элементе Canvas в QML

Элемент Canvas позволяет преобразовывать систему координат несколькими способами. Это очень похоже на преобразование, предлагаемое элементами QML. У вас есть возможность масштабировать (scale), вращать (rotate), переносить систему координат (translate). Независимо от QML, начало координат преобразования всегда является началом координат холста. Например, чтобы масштабировать путь вокруг его центра, вам нужно будет перевести начало координат холста в центр этого пути. Также можно применить более сложное преобразование с помощью метода transform.

import QtQuick

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

            // переносим систему координат x/y
            ctx.translate(root.width/2, root.height/2);

            // рисуем путь
            ctx.beginPath();
            ctx.rect(-20, -20, 40, 40);
            ctx.stroke();

            // вращаем систему координат
            ctx.rotate(Math.PI/4);
            ctx.strokeStyle = "green";

            // рисуем путь
            ctx.beginPath();
            ctx.rect(-20, -20, 40, 40);
            ctx.stroke();
    }
}

Помимо переноса, Canvas также позволяет масштабировать с помощью scale(x, y) вокруг осей x и y, поворачивать с помощью rotate(угол), где угол задается в радианах (360 градусов = 2 * Math.PI) и использовать матричное преобразование с использованием setTransform(m11, m12, m21, m22, dx, dy).

ctx.resetTransform()

Теги