Рисование и анимация в QML

Рисование на Canvas. Context2D

Для отрисовки графики в QML применяется элемент Canvas. Он предоставляет двухмерную поверхность рисования, которая использует объект Context2D для отрисовки. А вся отрисовка выполняется в функции onPaint(), которая обрабатывает сигнал paint:

Причем сам Canvas ничего не рисует, отрисовка выполняется с помощью методов типа Context2D. Для получения объекта Context2D элемент Canvas предоставляет функцию getContext("2d").

import QtQuick

Window {
    width: 250
    height: 150
    visible: true
    title: "METANIT.COM"

    Canvas {
        anchors.fill: parent
        onPaint: {
            const context = getContext("2d");   // получаем объект Context2D
            // отрисовка
        }
    }
}

Чтобы начать рисование, нам надо установить контекст на определенную точку с помощью метода moveTo(x,y), в который передаются x- и y-координаты начальной точки:

onPaint: {
    const context = getContext("2d");
    context.moveTo(20,10)   // устанавливаем контекст на точку (X=20, Y=10)
}

Далее мы можем начать рисование с помощью одного из методов Context2D. Например, для создания линии применяется метод lineTo(x,y), в который передаются координаты конечной точки:

onPaint: {
    const context = getContext("2d");
    context.moveTo(20,10)
    context.lineTo(180,10)  // линия от (X=20, Y=10) до (X=180, Y=10)
}

Для отрисовки линий применяетс функция stroke():

import QtQuick

Window {
    width: 250
    height: 150
    visible: true
    title: "METANIT.COM"

    Canvas {
        anchors.fill: parent
        onPaint: {
            const context = getContext("2d");
            context.moveTo(20,10)
            context.lineTo(180,10)
            context.stroke()        // отрисовка линии
        }
    }
}

Конечная точка каждой линии служит начальной точкой следующей линии:

import QtQuick

Window {
    width: 250
    height: 150
    visible: true
    title: "METANIT.COM"

    Canvas {
        anchors.fill: parent
        onPaint: {
            const context = getContext("2d");
            context.moveTo(20,10)
            context.lineTo(230,10)
            context.lineTo(230,130)
            context.lineTo(20,130)
            context.stroke()
        }
    }
}