Тип 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(красный, зелёный, синий)' - например: 'rgb(255, 100, 55)' или 'rgb(100%, 70%, 30%)'
• 'rgba(красный, зелёный, синий, альфа)' - например: 'rgb(255, 100, 55, 1.0)' или 'rgb(100%, 70%, 30%, 0.5)'
• 'hsl(оттенок, насыщенность, светлота)'
• 'hsla(оттенок, насыщенность, светлота, альфа)'
• '#RRGGBB' - например: '#00FFCC'
• Qt.rgba(красный, зелёный, синий, альфа) - например: 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 xor B. Побитовое исключающее ИЛИ исходного и целевого изображений.

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

lineCap : строка

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

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

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

[since 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, вещественное радиус, вещественное начальныйУгол, вещественное конечныйУгол, логическое противЧасовойСтрелки)

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

И начальныйУгол, и конечныйУгол измеряются от оси x в радианах.

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

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

объект arcTo(вещественное x1, вещественное y1, вещественное x2, вещественное y2, вещественное радиус)

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

• Вызовите метод 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 контекста для 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 контекста для clip.

объект closePath()

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

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

объект createConicalGradient(вещественный x, вещественный y, вещественный 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(вещественный 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" - ни в одном

Если аргумент repetition пуст или равен 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() элемента 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] массив getLineDash()

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

Этот метод был добавлен в 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(real x, real y, real w, real h)

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

объект reset()

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

объект resetTransform()

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

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

объект restore()

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

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

объект rotate(real angle)

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

ctx.rotate(Math.PI/2);

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

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

объект roundedRect(real x, real y, real w, real h, real xRadius, real 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(real x, real 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(real a, real b, real c, real d, real e, real f)

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

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

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

где:

• a — коэффициент масштабирования по горизонтали (x)

  

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

  

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

  

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

  

• d — коэффициент масштабирования по y

  

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

  

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

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

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

объект shear(real sh, real sv)

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

объект stroke()

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

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

объект strokeRect(real x, real y, real w, real 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(string text, real x, real y)

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

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

объект transform(real a, real b, real c, real d, real e, real 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 в единицах координатного пространства.

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