Отрисовка графических примитивов на Canvas

Рисование пути

Context2D позволяет рисовать замкнутые геометрические пути. Чтобы указать, что начинается путь, выполняется функция beginPath(). Для завершения пути вызывается функция closePath() - она автоматически рисует линию между первой и последней точками пути:

import QtQuick

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

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

Рисование дуг

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

arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

Эта функция добавляет к текущему пути дугу, которая лежит на окружности с центром в точке (x, y) и радиусом radius. Параметры startAngle и endAngle задают начальный и конечный углы для обрезки дуги и измеряются по оси X в радианах.

Параметр anticlockwise указывает направление измерения дуги. При значении false измерение идет по часовой стрелке.

Пример дуги:

Canvas {
    anchors.fill: parent
    onPaint: {
        const context = getContext("2d");
        // окружность за исключением дуги от 0 до 90 градусов
        context.arc(50, 50, 40, 0, 1.57, true);
        context.stroke();
    }
}

Также есть другую функцию для рисования дуг - arcTo()

arcTo(real x1, real y1, real x2, real y2, real radius)

Она добавляет к текущему пути дугу с начальной точкой (x1, y1), конечной точкой (x2, y2) и радиусом radius

Рисование окружностей и овалов

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

ellipse(real x, real y, real w, real h)

Функция создает и добавляет к открытому пути эллипс, который определяется внутри прямоугольной области с верхним левым углом в точке (x, y), шириной w и высотой h. Применение:

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

Рисование прямоугольников

Для рисования прямоугольников применяется функция strokeRect():

strokeRect(real x, real y, real w, real h)

Функция создает прямоугольник, верхний левый углом которого определяется в точке (x, y), и который имеет ширину w и высоту h. Применение:

Canvas {
    anchors.fill: parent
    onPaint: {
        const context = getContext("2d");
        context.strokeRect(20,10, 210, 130);
    }
}

Кривые Безье

Для отрисовки кривой Безье применяется функция bezierCurveTo

bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

Эта функция добавляет кубическую кривую Безье между текущей позицией и заданной конечной точкой, используя контрольные точки (cp1x, cp1y) и (cp2x, cp2y). После добавления кривой текущая позиция обновляется и становится конечной точкой (x, y) кривой. Например:

Canvas {
    anchors.fill: parent
    onPaint: {
        const context = getContext("2d");
        context.moveTo(20, 30);     // начальная точка
        context.bezierCurveTo(-10, 90, 210, 90, 180, 30);
        context.stroke();
    }
}