Тип QML Context2D

Предоставляет 2D-контекст для фигур на элементе Canvas. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• canvas : QtQuick::Canvas
• fillRule : перечисление
• fillStyle : значение
• font : строка
• globalAlpha : вещественное число
• globalCompositeOperation : строка
• lineCap : строка
• lineDashOffset : вещественное число
• lineJoin : строка
• lineWidth : вещественное число
• miterLimit : вещественное число
• shadowBlur : вещественное число
• shadowColor : строка
• shadowOffsetX : qreal
• shadowOffsetY : qreal
• strokeStyle : значение
• textAlign : строка
• textBaseline : строка

Методы

• объект arc(вещественное число x, вещественное число y, вещественное число radius, вещественное число startAngle, вещественное число endAngle, логическое значение anticlockwise)
• объект arcTo(вещественное число x1, вещественное число y1, вещественное число x2, вещественное число y2, вещественное число radius)
• объект beginPath()
• объект bezierCurveTo(вещественное число cp1x, вещественное число cp1y, вещественное число cp2x, вещественное число cp2y, вещественное число x, вещественное число y)
• объект clearRect(вещественное число x, вещественное число y, вещественное число w, вещественное число h)
• объект clip()
• объект closePath()
• объект createConicalGradient(вещественное число x, вещественное число y, вещественное число angle)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(вещественное число sw, вещественное число sh)
• объект createLinearGradient(вещественное число x0, вещественное число y0, вещественное число x1, вещественное число y1)
• значение createPattern(Изображение image, строка repetition)
• значение createPattern(цвет color, перечисление patternMode)
• объект createRadialGradient(вещественное число x0, вещественное число y0, вещественное число r0, вещественное число x1, вещественное число y1, вещественное число r1)
• drawImage(значение image, вещественное число sx, вещественное число sy, вещественное число sw, вещественное число sh, вещественное число dx, вещественное число dy, вещественное число dw, вещественное число dh)
• drawImage(значение image, вещественное число dx, вещественное число dy, вещественное число dw, вещественное число dh)
• drawImage(значение image, вещественное число dx, вещественное число dy)
• объект ellipse(вещественное число x, вещественное число y, вещественное число w, вещественное число h)
• объект fill()
• объект fillRect(вещественное число x, вещественное число y, вещественное число w, вещественное число h)
• объект fillText(text, x, y)
• CanvasImageData getImageData(вещественное число x, вещественное число y, вещественное число w, вещественное число h)
• массив getLineDash()
• объект isPointInPath(вещественное число x, вещественное число y)
• объект lineTo(вещественное число x, вещественное число y)
• объект measureText(text)
• объект moveTo(вещественное число x, вещественное число y)
• объект putImageData(CanvasImageData imageData, вещественное число dx, вещественное число dy, вещественное число dirtyX, вещественное число dirtyY, вещественное число dirtyWidth, вещественное число dirtyHeight)
• объект quadraticCurveTo(вещественное число cpx, вещественное число cpy, вещественное число x, вещественное число y)
• объект rect(вещественное число x, вещественное число y, вещественное число w, вещественное число h)
• объект reset()
• объект resetTransform()
• объект restore()
• объект rotate(вещественное число angle)
• объект roundedRect(вещественное число x, вещественное число y, вещественное число w, вещественное число h, вещественное число xRadius, вещественное число yRadius)
• объект save()
• объект scale(вещественное число x, вещественное число y)
• setLineDash(массив pattern)
• объект setTransform(вещественное число a, вещественное число b, вещественное число c, вещественное число d, вещественное число e, вещественное число f)
• объект shear(вещественное число sh, вещественное число sv)
• объект stroke()
• объект strokeRect(вещественное число x, вещественное число y, вещественное число w, вещественное число h)
• объект strokeText(text, x, y)
• объект text(строка text, вещественное число x, вещественное число y)
• объект transform(вещественное число a, вещественное число b, вещественное число c, вещественное число d, вещественное число e, вещественное число f)
• объект translate(вещественное число x, вещественное число y)

Подробное описание

Объект Context2D можно создать с помощью метода Canvas элемента getContext():

Canvas {
  id:canvas
  onPaint:{
     var ctx = canvas.getContext('2d');
     //...
  }
}

API Context2D реализует тот же стандарт W3C Canvas 2D Context API с некоторыми улучшенными функциями.

API Context2D предоставляет контекст отрисовки, который определяет методы и атрибуты, необходимые для отрисовки на элементе Canvas. Следующее присваивает контекст отрисовки холста переменной context:

var context = mycanvas.getContext("2d")

API Context2D отрисовывает холст в качестве системы координат, где начало координат (0,0) находится в верхнем левом углу, как показано на рисунке ниже. Координаты увеличиваются по оси x слева направо и по оси y сверху вниз на холсте.

Документация по свойствам

canvas : QtQuick::Canvas

Содержит элемент холста, на котором контекст выполняет отрисовку.

Это свойство является только для чтения.

fillRule : перечисление

Содержит текущее правило заливки, используемое для заполнения фигур. Поддерживаются следующие правила заливки:

• Qt.OddEvenFill
• Qt.WindingFill

Примечание: В отличие от QPainterPath, API Canvas использует правило заливки по обходу как правило заливки по умолчанию. Свойство fillRule является частью состояния отрисовки контекста.

См. также fillStyle.

fillStyle : значение

Содержит текущий стиль, используемый для заполнения фигур. Стиль может быть либо строкой, содержащей цвет CSS, либо объектом CanvasGradient или CanvasPattern. Недопустимые значения игнорируются. Это свойство принимает несколько синтаксисов цвета:

• 'rgb(red, green, blue)' - например: 'rgb(255, 100, 55)' или 'rgb(100%, 70%, 30%)'
• 'rgba(red, green, blue, alpha)' - например: 'rgb(255, 100, 55, 1.0)' или 'rgb(100%, 70%, 30%, 0.5)'
• 'hsl(hue, saturation, lightness)'
• 'hsla(hue, saturation, lightness, alpha)'
• '#RRGGBB' - например: '#00FFCC'
• Qt.rgba(red, green, blue, alpha) - например: Qt.rgba(0.3, 0.7, 1, 1.0)

Если fillStyle или strokeStyle присваивается много раз в цикле, следует использовать синтаксис Qt.rgba(), так как он обеспечивает наилучшую производительность, поскольку это уже допустимое значение QColor, которое не нужно каждый раз парсить.

Значение по умолчанию — '#000000'.

См. также createLinearGradient(), createRadialGradient(), createPattern() и strokeStyle.

font : строка

Содержит текущие настройки шрифта.

Поддерживается подмножество стандарта w3C 2d context для шрифтов:

• font-style (необязательно): normal | italic | oblique
• font-variant (необязательно): normal | small-caps
• font-weight (необязательно): normal | bold | 1 ... 1000
• font-size: Npx | Npt (где N — положительное число)
• font-family: См. http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

Значение шрифта по умолчанию — "10px sans-serif".

globalAlpha : действительное число

Содержит текущее значение альфа-канала, применяемое к операциям отрисовки. Значение должно быть в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный). Значение по умолчанию — 1.0.

globalCompositeOperation : строка

Содержит текущую операцию композиции из списка ниже:

• source-atop - A atop B. Отображает исходное изображение там, где оба изображения непрозрачны. Отображает целевое изображение там, где целевое изображение непрозрачно, а исходное — прозрачно. В остальных местах отображается прозрачность.
• source-in - A in B. Отображает исходное изображение там, где исходное и целевое изображения непрозрачны. В остальных местах отображается прозрачность.
• source-out - A out B. Отображает исходное изображение там, где исходное изображение непрозрачно, а целевое — прозрачно. В остальных местах отображается прозрачность.
• source-over - (по умолчанию) A over B. Отображает исходное изображение там, где оно непрозрачно. В остальных местах отображается целевое изображение.
• destination-atop - B atop A. То же, что source-atop, но с использованием целевого изображения вместо исходного и наоборот.
• destination-in - B in A. То же, что source-in, но с использованием целевого изображения вместо исходного и наоборот.
• destination-out - B out A. То же, что source-out, но с использованием целевого изображения вместо исходного и наоборот.
• destination-over - B over A. То же, что source-over, но с использованием целевого изображения вместо исходного и наоборот.
• lighter - A plus B. Отображает сумму исходного и целевого изображений, с цветовыми значениями, приближающимися к 255 (100%) как к пределу.
• copy - A (B игнорируется). Отображает исходное изображение вместо целевого.
• xor - A xor B. Исключающее ИЛИ исходного и целевого изображений.

Кроме того, это свойство также принимает режимы композиции, перечисленные в QPainter::CompositionMode. Согласно стандарту W3C, эти расширенные режимы композиции предоставляются в синтаксисе "vendorName-operationName", например: QPainter::CompositionMode_Exclusion предоставляется как "qt-exclusion".

lineCap : строка

Содержит текущий стиль окончания линии. Возможные стили окончания линии:

• butt - конец каждой линии имеет плоское ребро, перпендикулярное направлению линии, это значение по умолчанию для стиля окончания линии.
• round - к концу линии добавляется полуокружность с диаметром, равным ширине линии.
• square - прямоугольник с длиной, равной ширине линии, и шириной, равной половине ширины линии, расположенный плотно против ребра, перпендикулярного направлению линии.

Другие значения игнорируются.

[с QtQuick 2.11] lineDashOffset : действительное число

Содержит текущий смещение пунктирной линии. Значение смещения пунктирной линии по умолчанию — 0.

Это свойство было введено в QtQuick 2.11.

См. также getLineDash() и setLineDash().

lineJoin : строка

Содержит текущий стиль соединения линий. Соединение существует в любой точке подпути, совмещенной с двумя последовательными линиями. Когда подпуть закрыт, соединение также существует в его первой точке (эквивалентно его последней точке), соединяющей первую и последнюю линии в подпути.

Возможные стили соединения линий:

• bevel - это все, что отрисовывается на соединениях.
• round - заполненная дуга, соединяющая две упомянутые вершины соединения, примыкая (и не перекрывая) указанный треугольник, с диаметром, равным ширине линии, и началом в точке соединения, должна быть отрисована на соединениях.
• miter - второй заполненный треугольник должен (если это возможно, учитывая длину сглаживания) быть отрисован в точке соединения, это стиль соединения линий по умолчанию.

Другие значения игнорируются.

lineWidth : действительное число

Содержит текущую ширину линии. Значения, которые не являются конечными значениями, большими нуля, игнорируются.

miterLimit : действительное число

Содержит текущее отношение предела сглаживания. Значение предела сглаживания по умолчанию — 10,0.

shadowBlur : действительное число

Содержит текущий уровень размытия тени.

shadowColor : строка

Содержит текущий цвет тени.

shadowOffsetX : qreal

Содержит текущее смещение тени по горизонтали в положительном направлении.

См. также shadowOffsetY.

shadowOffsetY : qreal

Содержит текущее смещение тени по вертикали в положительном направлении.

См. также shadowOffsetX.

strokeStyle : значение

Содержит текущий цвет или стиль, используемый для линий вокруг фигур. Стиль может быть строкой, содержащей CSS-цвет, объектом CanvasGradient или CanvasPattern. Недопустимые значения игнорируются.

Значение по умолчанию — '#000000'.

См. также createLinearGradient(), createRadialGradient(), createPattern() и fillStyle.

textAlign : строка

Содержит текущие настройки выравнивания текста. Возможные значения:

• start
• end
• left
• right
• center

Другие значения игнорируются. Значение по умолчанию — "start".

textBaseline : строка

Содержит текущие настройки выравнивания базовой линии. Возможные значения:

• top
• hanging
• middle
• alphabetic
• ideographic
• bottom

Другие значения игнорируются. Значение по умолчанию — "alphabetic".

Документация по методам

объект arc(действительное число x, действительное число y, действительное число radius, действительное число startAngle, действительное число endAngle, логическое значение anticlockwise)

Добавляет дугу к текущему подпути, которая лежит по окружности круга, центр которого находится в точке (x, y), а радиус — radius.

И startAngle, и endAngle измеряются от оси x в радианах.

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

См. также arcTo и стандарт W3C для дуги arc().

объект arcTo(действительное число x1, действительное число y1, действительное число x2, действительное число y2, действительное число radius)

Добавляет дугу с заданными точками управления и радиусом к текущему подпути, соединённую с предыдущей точкой прямой линией. Чтобы нарисовать дугу, начните с тех же шагов, что и при создании линии:

• Вызовите метод beginPath() для задания нового пути.
• Вызовите метод moveTo(x, y) для задания начальной позиции на холсте в точке (x, y).
• Для рисования дуги или окружности вызовите метод arcTo(x1, y1, x2, y2, radius). Это добавляет дугу с начальной точкой (x1, y1), конечной точкой (x2, y2) и радиусом radius к текущей подтраектории и соединяет её с предыдущей подтраекторией прямой линией.

См. также arc и стандарт W3C 2D Context для arcTo().

объект beginPath()

Сбрасывает текущий путь на новый путь.

объект bezierCurveTo(вещественный cp1x, вещественный cp1y, вещественный cp2x, вещественный cp2y, вещественный x, вещественный y)

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

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 0);//start point
ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
ctx.stroke();

См. также стандарт W3C 2d context для bezierCurveTo и красивую демонстрацию использования bezierCurveTo.

объект clearRect(вещественный x, вещественный y, вещественный w, вещественный h)

Очищает все пиксели на холсте в прямоугольнике, заданном (x, y, w, h), до прозрачного черного.

объект clip()

Создаёт область обрезки из текущего пути. Любые части фигуры за пределами пути обрезки не отображаются. Для создания сложной фигуры с помощью метода clip():

1. Вызовите метод context.beginPath() для задания пути обрезки.
2. Определите путь обрезки, вызвав любую комбинацию методов lineTo, arcTo, arc, moveTo, и т. д., и closePath.
3. Вызовите метод context.clip().

Новая фигура отображается. Ниже показано, как путь обрезки может изменить способ отображения изображения:

См. также beginPath(), closePath(), stroke(), fill(), и стандарт W3C 2d context для clip.

объект closePath()

Закрывает текущую подтраекторию, нарисовав линию до начала подтраектории, автоматически начиная новый путь. Текущая точка нового пути — первая точка предыдущей подтраектории.

См. также стандарт W3C 2d context для closePath.

объект createConicalGradient(вещественный x, вещественный y, вещественный angle)

Возвращает объект CanvasGradient, представляющий конический градиент, который интерполирует цвета против часовой стрелки вокруг центральной точки (x, y) с начальным углом angle в радианах.

См. также CanvasGradient::addColorStop(), createLinearGradient(), createRadialGradient(), createPattern(), fillStyle и strokeStyle.

CanvasImageData createImageData(Url imageUrl)

Создаёт объект CanvasImageData с заданным изображением, загруженным из imageUrl.

См. также Canvas::loadImage(), QtQuick::Canvas::unloadImage(), и QtQuick::Canvas::isImageLoaded.

CanvasImageData createImageData(CanvasImageData imageData)

Создаёт объект CanvasImageData с теми же размерами, что и аргумент.

CanvasImageData createImageData(вещественный sw, вещественный sh)

Создаёт объект CanvasImageData с заданными размерами (sw, sh).

объект createLinearGradient(вещественный x0, вещественный y0, вещественный x1, вещественный y1)

Возвращает объект CanvasGradient, представляющий линейный градиент, который переходит цвет по прямой между начальной точкой (x0, y0) и конечной точкой (x1, y1).

Градиент — это плавный переход между цветами. Существуют два типа градиентов: линейный и радиальный. Градиенты должны иметь две или более цветовых точки, представляющих сдвиги цвета, расположенные от 0 до 1 между начальной и конечной точкой или окружностью градиента.

См. также CanvasGradient::addColorStop(), createRadialGradient(), createConicalGradient(), createPattern(), fillStyle и strokeStyle.

переменная createPattern(Изображение image, строка repetition)

Возвращает объект CanvasPattern, использующий заданное изображение и повторяющийся в направлении(ях), заданном аргументом repetition.

Параметр image должен быть допустимым элементом Image, допустимым объектом CanvasImageData или загруженным изображением url, если данных изображения нет, генерирует исключение INVALID_STATE_ERR.

Допустимые значения для repetition:

• "repeat" — в обоих направлениях
• "repeat-x" — только по горизонтали
• "repeat-y" — только по вертикали
• "no-repeat" — ни в каком направлении

Если аргумент повторения пустой или null, используется значение "repeat".

См. также strokeStyle и fillStyle.

переменная createPattern(цвет color, перечисление patternMode)

Это перегруженный метод. Возвращает объект CanvasPattern, который использует заданный color и patternMode. Допустимые режимы узора:

• Qt.SolidPattern
• Qt.Dense1Pattern
• Qt.Dense2Pattern
• Qt.Dense3Pattern
• Qt.Dense4Pattern
• Qt.Dense5Pattern
• Qt.Dense6Pattern
• Qt.Dense7Pattern
• Qt.HorPattern
• Qt.VerPattern
• Qt.CrossPattern
• Qt.BDiagPattern
• Qt.FDiagPattern
• Qt.DiagCrossPattern

См. также Qt::BrushStyle.

объект createRadialGradient(вещественный x0, вещественный y0, вещественный r0, вещественный x1, вещественный y1, вещественный r1)

Возвращает объект CanvasGradient, представляющий радиальный градиент, который рисует по конусу, заданному начальным кругом с центром (x0, y0) и радиусом r0 и конечным кругом с центром (x1, y1) и радиусом r1.

См. также CanvasGradient::addColorStop(), createLinearGradient(), createConicalGradient(), createPattern(), fillStyle и strokeStyle.

drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)

Это перегруженный метод. Рисует заданный элемент как image из исходной точки (sx, sy) и ширины sw, высоты sh на холст в точке (dx, dy) с шириной dw и высотой dh.

Примечание: тип image может быть элементом Image или Canvas, URL изображения или объектом CanvasImageData. Если в качестве элемента Image, если изображение не полностью загружено, этот метод ничего не рисует. Если в качестве строки URL, изображение должно быть загружено, вызвав метод Canvas::loadImage() элемента холста предварительно. Это рисуемое изображение подчиняется текущей обрезке контекста, даже если заданный image является объектом CanvasImageData.

См. также CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded и стандарт W3C 2d контекста для drawImage.

drawImage(variant image, real dx, real dy, real dw, real dh)

Это перегруженный метод. Рисует заданный элемент как image на холст в точке (dx, dy) с шириной dw и высотой dh.

Примечание: тип image может быть элементом Image, URL изображения или объектом CanvasImageData. Если в качестве элемента Image, если изображение не полностью загружено, этот метод ничего не рисует. Если в качестве строки URL, изображение должно быть загружено, вызвав метод Canvas::loadImage() элемента холста предварительно. Это рисуемое изображение подчиняется текущей обрезке контекста, даже если заданный image является объектом CanvasImageData.

См. также CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded и стандарт W3C 2d контекста для drawImage.

drawImage(variant image, real dx, real dy)

Рисует заданное image на холст в позиции (dx, dy). Примечание: тип image может быть элементом Image, URL изображения или объектом CanvasImageData. Если в качестве элемента Image, если изображение не полностью загружено, этот метод ничего не рисует. Если в качестве строки URL, изображение должно быть загружено, вызвав метод Canvas::loadImage() элемента холста предварительно. Это рисуемое изображение подчиняется текущей обрезке контекста, даже если заданный image является объектом CanvasImageData.

См. также CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded и стандарт W3C 2d контекста для drawImage.

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

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

Эллипс состоит из кривой по часовой стрелке, начинающейся и заканчивающейся в нуле градусов (в положении «3 часа»).

object fill()

Заполняет подпути текущей заливкой.

См. также стандарт W3C 2d контекста для fill и fillStyle.

object fillRect(real x, real y, real w, real h)

Закрашивает прямоугольную область, заданную (x, y, w, h), с помощью fillStyle.

См. также fillStyle.

object fillText(text, x, y)

Заполняет указанный текст text в заданной позиции (x, y).

См. также font, textAlign, textBaseline и strokeText.

CanvasImageData getImageData(real x, real y, real w, real h)

Возвращает объект CanvasImageData, содержащий данные изображения для прямоугольника холста, заданного (x, y, w, h).

[since QtQuick 2.11] array getLineDash()

Возвращает массив qreals, представляющий штрих-пунктирную линию.

Этот метод был представлен в QtQuick 2.11.

См. также setLineDash() и lineDashOffset.

object isPointInPath(real x, real y)

Возвращает true , если точка (x, y) находится в текущей траектории.

См. также стандарт W3C 2d контекста для isPointInPath.

object lineTo(real x, real y)

Рисует линию от текущей позиции до точки (x, y).

object measureText(text)

Возвращает объект со свойством width, значение которого эквивалентно вызову QFontMetrics::horizontalAdvance() с заданным text в текущем шрифте.

object moveTo(real x, real y)

Создаёт новый подпуть с точкой в (x, y).

object putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)

Рисует данные из заданного объекта imageData на холст в (dx, dy).

Если указан прямоугольник повреждения (dirtyX, dirtyY, dirtyWidth, dirtyHeight), то закрашиваются только пиксели из этого прямоугольника.

object quadraticCurveTo(real cpx, real cpy, real x, real y)

Добавляет квадратную кривую Безье между текущей точкой и конечной точкой (x, y) с контрольной точкой (cpx, cpy).

См. также стандарт W3C 2d контекста для quadraticCurveTo.

объект rect(вещественное x, вещественное y, вещественное w, вещественное h)

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

объект reset()

Сбрасывает состояние контекста и свойства до значений по умолчанию.

объект resetTransform()

Сбрасывает матрицу преобразования до значения по умолчанию (эквивалентно вызову setTransform(1, 0, 0, 1, 0, 0)).

См. также transform(), setTransform() и reset().

объект restore()

Извлекает верхнее состояние из стека, восстанавливая контекст до этого состояния.

См. также save().

объект rotate(вещественное angle)

Поворачивает холст вокруг текущей точки начала координат на angle радиан по часовой стрелке.

ctx.rotate(Math.PI/2);

Матрица поворота преобразования имеет следующий вид:

где угол angle выражен в радианах.

объект roundedRect(вещественное x, вещественное y, вещественное w, вещественное h, вещественное xRadius, вещественное yRadius)

Добавляет прямоугольник с закругленными углами, заданный координатами (x, y, w, h), в траекторию. Параметры xRadius и yRadius определяют радиусы эллипсов, задающих углы закругленного прямоугольника.

объект save()

Заносит текущее состояние в стек состояния.

Перед изменением атрибутов состояния следует сохранить текущее состояние для последующего использования. Контекст сохраняет стек состояний рисования. Каждое состояние состоит из текущей матрицы преобразования, области обрезки и значений следующих атрибутов:

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• font
• textAlign
• textBaseline

Текущая траектория НЕ является частью состояния рисования. Траекторию можно сбросить, вызвав метод beginPath().

объект scale(вещественное x, вещественное y)

Увеличивает или уменьшает размер каждого блока на холсте, умножая масштабные факторы на текущую матрицу преобразования. x — масштабный множитель в горизонтальном направлении, y — масштабный множитель в вертикальном направлении.

Следующий код удваивает горизонтальный размер объекта, нарисованного на холсте, и уменьшает его вертикальный размер вдвое:

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] setLineDash(массив pattern)

Устанавливает шаблон штриховки для заданного шаблона.

pattern — список чисел, определяющих расстояния для чередования рисования линии и промежутка.

Если количество элементов в массиве нечетное, элементы массива копируются и конкатенируются. Например, [5, 15, 25] станет [5, 15, 25, 5, 15, 25].

var space = 4 ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space]) ... ctx.stroke();

Этот метод был представлен в QtQuick 2.11.

См. также getLineDash() и lineDashOffset.

объект setTransform(вещественное a, вещественное b, вещественное c, вещественное d, вещественное e, вещественное f)

Изменяет матрицу преобразования на матрицу, заданную аргументами, как описано ниже.

Прямое изменение матрицы преобразования позволяет выполнять масштабирование, поворот и перемещение в одном шаге.

Каждая точка на холсте умножается на матрицу перед рисованием. Спецификация HTML Canvas 2D Context определяет матрицу преобразования как:

где:

• a — масштабный множитель в горизонтальном (x) направлении

  

• c — коэффициент наклона в направлении x

  

• e — смещение по оси x

  

• b — коэффициент наклона в направлении y (вертикальном)

  

• d — масштабный множитель в направлении y

  

• f — смещение по оси y

  

• последняя строка остается неизменной

Масштабные множители и коэффициенты наклона являются множителями; e и f — единицы координатного пространства, как и единицы в методе translate(x,y).

См. также transform().

объект shear(вещественное sh, вещественное sv)

Сдвигает матрицу преобразования на sh в горизонтальном направлении и sv в вертикальном направлении.

объект stroke()

Отображает подтраектории с текущим стилем штриховки.

См. также strokeStyle и стандарт W3C 2d контекста для штриховки.

объект strokeRect(вещественное x, вещественное y, вещественное w, вещественное h)

Рисует штрих прямоугольника, заданного координатами (x, y, w, h), используя атрибуты strokeStyle, lineWidth, lineJoin и (при необходимости) miterLimit.

См. также strokeStyle, lineWidth, lineJoin и miterLimit.

объект strokeText(text, x, y)

Рисует штрих заданного текста text в позиции (x, y).

См. также font, textAlign, textBaseline и fillText.

объект text(строка text, вещественное x, вещественное y)

Добавляет заданный текст text в траекторию как набор замкнутых подтраекторий, созданных из текущего шрифта контекста.

Подтраектории размещаются так, что левый край базовой линии текста лежит в точке (x, y).

объект transform(вещественное a, вещественное b, вещественное c, вещественное d, вещественное e, вещественное f)

Этот метод очень похож на setTransform(), но вместо замены старой матрицы преобразования этот метод применяет заданную матрицу преобразования к текущей матрице путем умножения на неё.

Метод setTransform(a, b, c, d, e, f) фактически сбрасывает текущее преобразование на единичную матрицу и затем вызывает метод transform(a, b, c, d, e, f) с теми же аргументами.

См. также setTransform().

object translate(real x, real y)

Перемещает начало координат холста на горизонтальное расстояние x и вертикальное расстояние y в единицах координатного пространства.

Перемещение начала координат позволяет рисовать различные объекты на холсте без необходимости ручного измерения координат для каждой фигуры.