Тип 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(imageUrl)
• CanvasImageData createImageData(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(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 использует правило заливки winding в качестве правила заливки по умолчанию. Свойство 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 или стиль линии присваивается многократно в цикле, следует использовать синтаксис Qt.rgba(), так как он обеспечивает лучшую производительность, поскольку это уже действительное значение QColor, не требующее повторного парсинга.

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

См. такжеcreateLinearGradient(), createRadialGradient(), createPattern() и стиль линии.

шрифт : строка

Содержит текущие параметры шрифта.

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

• font-style (необязательно): normal | italic | oblique
• font-variant (необязательно): normal | small-caps
• font-weight (необязательно): normal | bold | 0 ... 99
• 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 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, эти расширенные режимы композиции предоставляются в синтаксисе «имя поставщика-имя операции», например: QPainter::CompositionMode_Exclusion предоставляется как «qt-exclusion».

lineCap : строка

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

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

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

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), а радиус — радиус.

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

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

См. такжеarcTo и стандарт 2D контекста W3C для 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 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(imageUrl)

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

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

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

CanvasImageData createImageData(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(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(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(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(x, real y, real w, real h)

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

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

object fill()

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

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

object fillRect(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(x, real y, real w, real h)

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

array getLineDash()

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

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

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

object isPointInPath(x, real y)

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

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

object lineTo(x, real y)

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

object measureText(text)

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

object moveTo(x, real y)

Создаёт новую подтраекторию с точкой в (x, y).

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

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

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

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

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

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

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

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

object reset()

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

object resetTransform()

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

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

объект restore()

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

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

объект rotate(угол)

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

ctx.rotate(Math.PI/2);

Матрица поворота преобразования имеет вид:

где угол поворота указан в радианах.

объект 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
• шрифт
• textAlign
• textBaseline

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

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

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

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

ctx.scale(2.0, 0.5);

setLineDash(шаблон)

Устанавливает шаблон пунктирной линии.

шаблон — список чисел, определяющих расстояния для чередующегося рисования линии и пробела.

Если число элементов в массиве нечётно, элементы массива копируются и конкатенируются. Например, [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 определяет матрицу преобразования как:

где:

• 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(текст, x, y)

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

См. также шрифт, textAlign, textBaseline и fillText.

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

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

Подпути размещаются таким образом, что левый край базовой линии текста находится в точке (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().

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

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

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