Тип 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

Примечание: свойства font-size и font-family являются обязательными и должны быть в указанном порядке. Кроме того, имя семейства шрифтов с пробелами должно быть заключено в кавычки.

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

globalAlpha : вещественное

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

globalCompositeOperation : строка

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

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

Кроме того, это свойство также принимает режимы композиции, перечисленные в QPainter::CompositionMode. Согласно стандарту W3C, эти расширенные режимы композиции предоставляются в формате «имя_продавца-имя_операции», например: 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 2D контекста для arc().

объект arcTo(вещественное x1, вещественное y1, вещественное x2, вещественное y2, вещественное radius)

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

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

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

объект beginPath()

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

объект bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real 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(real x, real y, real w, real 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(real x, real y, real angle)

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

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

CanvasImageData createImageData(Url imageUrl)

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

Примечание: imageUrl должен быть загружен до вызова этой функции, в противном случае будет возвращён пустой объект CanvasImageData.

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

CanvasImageData createImageData(CanvasImageData imageData)

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

CanvasImageData createImageData(real sw, real sh)

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

объект createLinearGradient(real x0, real y0, real x1, real y1)

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

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

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

вариант createPattern(Image image, string repetition)

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

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

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

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

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

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

вариант createPattern(color color, enumeration 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(real x0, real y0, real r0, real x1, real y1, real 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() элемента Canvas предварительно. Рисование этого изображения подчиняется текущей обрезке контекста, даже если заданный 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() элемента Canvas предварительно. Рисование этого изображения подчиняется текущей обрезке контекста, даже если заданный 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() элемента Canvas предварительно. Рисование этого изображения подчиняется текущей обрезке контекста, даже если заданный 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 context standard for stroke.

объект 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 по вертикали в единицах координатного пространства.

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