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

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

Поддерживается подмножество стандарта 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 : real

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

globalCompositeOperation : string

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

• 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, эти расширенные режимы композиции предоставляются в синтаксисе "vendorName-operationName", например: QPainter::CompositionMode_Exclusion предоставляется как "qt-exclusion".

lineCap : string

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

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

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

lineDashOffset : real

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

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

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

lineJoin : string

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

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

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

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

lineWidth : real

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

miterLimit : real

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

shadowBlur : real

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

shadowColor : string

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

shadowOffsetX : qreal

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

См. также shadowOffsetY.

shadowOffsetY : qreal

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

См. также shadowOffsetX.

strokeStyle : variant

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

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

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

textAlign : string

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

• start
• end
• left
• right
• center

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

textBaseline : string

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

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

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

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

object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

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

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

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

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

object arcTo(real x1, real y1, real x2, real y2, real 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(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.

variant createPattern(Image image, string repetition)

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

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

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

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

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

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

variant 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).

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::width() с данным текстом 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);

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)

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

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

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

где:

• 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 и стандарт контекста 2d для штриха W3C.

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

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