Отрисовка текста на Canvas

Для вывода текста на Canvas в QML объект Context2D применяет функцию fillText()

fillText(text, x, y)

В эту функцию передается выводимый текст и координаты левой точки базовой линии текста. Применение:

import QtQuick

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

    Canvas {
        anchors.fill: parent
        onPaint: {
            const context = getContext("2d");
            context.fillText("Hello Work", 40,30);
        }
    }
}

Настройка шрифта

Для вывода текста применяется шрифт по умолчанию. Но с помощью свойства font объекта Context2D можно переопределить настройки шрифта. Шрифт передается в виде строки, которая включает следующие параметры в порядке следования:

• стиль шрифта (необязательный параметр): в виде значений normal | italic | oblique

• вариант шрифта (необязательный параметр): в виде значений normal | small-caps

• вес шрифта (необязательный параметр): в виде значений normal | bold или числа от 1 до 1000

• высота шрифта: в виде значения в пикселях (Npx) или точках (Npt)

• семейство шрифтов

Canvas {
    anchors.fill: parent
    onPaint: {
        const context = getContext("2d");
        context.font = "15pt Verdana";   // устанавливаем шрифт
        context.text("Hello Work", 40,30);
        context.stroke();
    }
}

В данном случае применяется шрифт Verdana высотой в 15 точек.

Вывод контура текста

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

text(string text, real x, real y)

Эта функция принимает выводимый текст через параметр text, а параметры x и y определяют координаты начала базовой линиии текста. Эта функция добавляет текст к открытому пути как набор закрытых подпутей.

Canvas {
    anchors.fill: parent
    onPaint: {
        const context = getContext("2d");
        context.font = "15pt Verdana";
        
        context.beginPath();
        context.text("Hello Work", 40,30);
        context.stroke();
    }
}

Фактически в данном случае выводится контур текста. Также для вывода текста можно использовать функцию strokeText()

Canvas {
    anchors.fill: parent
    onPaint: {
        const context = getContext("2d");
        context.font = "15pt Verdana";
        context.strokeText("Hello Work", 40,30);
    }
}

Цвет текста

С помощью свойств fillStyle и strokeStyle можно установить соответственно цвет заливки и контура текста:

Canvas {
    anchors.fill: parent
    onPaint: {
        const context = getContext("2d");
        context.font = "15pt Verdana"
        
        context.fillStyle = "#2980b9"   // синий
        context.fillText("Hello Work", 40,30);

        context.strokeStyle = "#16a085" // зеленый
        context.strokeText("Hello Word", 40,80);
    }
}