Context2D QML Type

为 Canvas 项上的形状提供 2D 上下文。更多...

• 所有成员列表，包括继承的成员

属性

• canvas : QtQuick::Canvas
• fillRule : enumeration
• fillStyle : variant
• font : string
• globalAlpha : real
• globalCompositeOperation : string
• lineCap : string
• lineDashOffset : real (since QtQuick 2.11)
• lineJoin : string
• lineWidth : real
• miterLimit : real
• shadowBlur : real
• shadowColor : string
• shadowOffsetX : real
• shadowOffsetY : real
• strokeStyle : variant
• textAlign : string
• textBaseline : string

方法

• Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• Context2D arcTo(real x1, real y1, real x2, real y2, real radius)
• Context2D beginPath()
• Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• Context2D clearRect(real x, real y, real w, real h)
• Context2D clip()
• Context2D closePath()
• CanvasGradient createConicalGradient(real x, real y, real angle)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(real sw, real sh)
• CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)
• variant createPattern(Image image, string repetition)
• variant createPattern(color color, enumeration patternMode)
• CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• void drawImage(variant image, real dx, real dy)
• void drawImage(variant image, real dx, real dy, real dw, real dh)
• void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)
• Context2D ellipse(real x, real y, real w, real h)
• Context2D fill()
• Context2D fillRect(real x, real y, real w, real h)
• Context2D fillText(text, x, y)
• CanvasImageData getImageData(real x, real y, real w, real h)
• array getLineDash() (since QtQuick 2.11)
• bool isPointInPath(real x, real y)
• Context2D lineTo(real x, real y)
• var measureText(text)
• Context2D moveTo(real x, real y)
• void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)
• Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)
• Context2D rect(real x, real y, real w, real h)
• Context2D reset()
• Context2D resetTransform()
• Context2D restore()
• Context2D rotate(real angle)
• Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)
• Context2D save()
• Context2D scale(real x, real y)
• void setLineDash(array pattern) (since QtQuick 2.11)
• Context2D setTransform(real a, real b, real c, real d, real e, real f)
• Context2D shear(real sh, real sv)
• Context2D stroke()
• Context2D strokeRect(real x, real y, real w, real h)
• Context2D strokeText(text, x, y)
• Context2D text(string text, real x, real y)
• Context2D transform(real a, real b, real c, real d, real e, real f)
• Context2D translate(real x, real y)

详细说明

可以通过Canvas 项的getContext() 方法创建Context2D对象：

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

Context2D API 实现了与W3C Canvas 2D Context API 标准相同的规范，并增加了一些增强功能。

Context2D API 提供渲染上下文，该上下文定义了在Canvas 项上绘图所需的方法和属性。以下代码将 canvas 渲染上下文赋值给变量context ：

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

Context2D API 将画布渲染为一个坐标系，其原点 (0,0) 位于左上角，如下图所示。坐标值沿x 轴从左向右递增，沿y 轴从画布顶部向下递增。

属性文档

canvas : QtQuick::Canvas

保存上下文进行绘制的画布项。

该属性为只读属性。

fillRule : enumeration

保存当前用于填充形状的填充规则。支持以下填充规则：

另请参阅 fillStyle 。

fillStyle : variant

存储当前用于填充形状的样式。该样式可以是包含 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(色相, 饱和度, 明度)'
• '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 上下文标准中关于字体的子集：

• font-style（可选）：normal | italic | oblique
• font-variant（可选）：normal | small-caps
• font-weight（可选）：normal | bold | 1 ... 1000
• font-size：Npx | Npt（其中 N 为正数）
• font-family：参见http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

默认字体值为“10px sans-serif”。

globalAlpha : real

存储当前应用于渲染操作的Alpha值。该值必须在0.0 （完全透明）到1.0 （完全不透明）之间。默认值为1.0 。

globalCompositeOperation : string

保留当前的组合操作。允许的操作包括：

根据 W3C 标准，超出必选模式的扩展合成模式采用“供应商名称-操作名称”的语法，例如：QPainter::CompositionMode_Exclusion 被定义为“qt-exclusion”。

lineCap : string

保存当前的线条末端样式。可选的线条末端样式包括：

其他值将被忽略。

lineDashOffset : real [since QtQuick 2.11]

存储当前线条虚线偏移量。默认的线条虚线偏移量值为0 。

该属性在 QtQuick 2.11 中引入。

另请参阅 getLineDash() 和setLineDash()。

lineJoin : string

保存当前的线段连接样式。在两条连续线段共有的子路径中的任意一点上都存在一个连接点。当子路径闭合时，其起始点（等同于终点）处也存在一个连接点，用于连接该子路径中的第一条和最后一条线段。

可能的线段连接样式包括：

其他值将被忽略。

lineWidth : real

保存当前的线宽。非大于零的有限值将被忽略。

miterLimit : real

保存当前的斜切限制比率。默认的斜切限制值为 10.0。

shadowBlur : real

保存当前应用于阴影的模糊程度

shadowColor : string

保存当前的阴影颜色。

shadowOffsetX : real

将当前阴影偏移量保存在正水平距离中。

另请参阅 shadowOffsetY 。

shadowOffsetY : real

将当前阴影偏移量存储在正垂直距离中。

另请参阅 shadowOffsetX 。

strokeStyle : variant

存储用于形状周围线条的当前颜色或样式。样式可以是包含 CSS 颜色的字符串，也可以是CanvasGradient 或 CanvasPattern 对象。无效值将被忽略。

默认值为 '#000000'。

另请参阅 createLinearGradient()、createRadialGradient()、createPattern() 以及fillStyle 。

textAlign : string

保存当前的文本对齐设置。可能的取值包括：

其他值将被忽略。

textBaseline : string

保存当前的基线对齐设置。可能的取值包括：

其他值将被忽略。默认值为“alphabetic”。

方法文档

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

在当前子路径上添加一条弧，该弧位于以点 (x,y) 为圆心、半径为radius 的圆的圆周上。

startAngle 和endAngle 均以弧度为单位，从 x 轴开始测量。

对于上图中的每个弧，anticlockwise 参数均为false ，因为它们均按顺时针方向绘制。

另请参阅 arcTo 以及W3C 的 2D 上下文标准中关于 arc() 的说明。

Context2D 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 上下文标准中关于 arcTo() 的说明。

Context2D beginPath()

将当前路径重置为新路径。

Context2D 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 上下文标准中关于 `bezierCurveTo` 的说明，以及使用 `bezierCurveTo` 制作的精美花朵演示。

Context2D clearRect(real x, real y, real w, real h)

将画布上由 (x,y,w,h) 指定的矩形区域内的所有像素清为透明黑色。

Context2D clip()

根据当前路径创建裁剪区域。形状中位于裁剪路径外的任何部分均不会显示。要使用clip() 方法创建复杂形状：

1. 调用context.beginPath() 方法来设置剪切路径。
2. 通过调用lineTo 、arcTo 、arc 、moveTo 等方法与closePath 方法的任意组合来定义剪切路径。
3. 调用context.clip() 方法。

新的形状随即显示。以下示例展示了裁剪路径如何改变图像的显示效果：

另请参阅 beginPath()、closePath()、stroke()、fill() 以及W3C 2D 上下文标准中关于 clip 的内容。

Context2D closePath()

通过绘制一条连线至子路径的起始点来关闭当前子路径，并自动开始绘制新路径。新路径的当前点即为前一个子路径的起始点。

另请参阅 W3C 2D 上下文标准中关于 closePath 的说明。

CanvasGradient createConicalGradient(real x, real y, real angle)

返回一个CanvasGradient 对象，该对象表示一个锥形渐变，该渐变以中心点为圆心（x ，y ），沿逆时针方向对颜色进行插值，起始角度为angle （单位为弧度）。

另请参阅 CanvasGradient::addColorStop()、createLinearGradient()、createRadialGradient()、createPattern()、fillStyle 以及strokeStyle 。

CanvasImageData createImageData(CanvasImageData imageData)

创建一个与imageData 参数具有相同尺寸的CanvasImageData 对象。

CanvasImageData createImageData(Url imageUrl)

创建一个CanvasImageData 对象，并加载来自imageUrl 的指定图像。

另请参阅 Canvas::loadImage()、QtQuick::Canvas::unloadImage() 和QtQuick::Canvas::isImageLoaded 。

CanvasImageData createImageData(real sw, real sh)

创建一个具有给定尺寸（sw ，sh ）的CanvasImageData 对象。

CanvasGradient 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 的有效值包括：

如果重复参数为空或为 null，则使用值“repeat”。

另请参阅 strokeStyle 和fillStyle 。

variant createPattern(color color, enumeration patternMode)

这是一个重载函数。返回一个使用给定的color 和patternMode 的CanvasPattern对象。有效的图案模式包括：

另请参阅 Qt::BrushStyle 。

CanvasGradient 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 。

void drawImage(variant image, real dx, real dy)

在画布上 (dx,dy) 位置绘制给定的image 。注意：image 类型可以是Image项、图像URL或CanvasImageData 对象。当作为Image项提供时，如果图像尚未完全加载，此方法将不进行绘制。 当作为 URL 字符串传入时，应先通过调用 Canvas 项的Canvas::loadImage() 方法加载该图像。正在绘制的图像受当前上下文剪切路径的限制，即使传入的image 是CanvasImageData 对象也是如此。

另请参阅 CanvasImageData 、Image 、Canvas::loadImage 、Canvas::isImageLoaded 、Canvas::imageLoaded 以及W3C 2D 上下文标准中关于 drawImage 的说明。

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

这是一个重载函数。将给定的项作为image 绘制到画布上，坐标为(dx,dy)，宽度为dw ，高度为dh 。

注意：image 类型可以是Image项、图片URL或CanvasImageData 对象。当作为Image项提供时，如果图片尚未完全加载，此方法将不进行绘制。 当作为URL字符串提供时，应先通过调用Canvas项的Canvas::loadImage()方法加载该图像。正在绘制的图像受当前上下文剪切路径的约束，即使给定的image 是CanvasImageData 对象也是如此。

另请参阅 CanvasImageData 、Image 、Canvas::loadImage()、Canvas::isImageLoaded 、Canvas::imageLoaded 以及W3C 2D 上下文标准中关于 drawImage 的相关内容。

void 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 项的 `Canvas::loadImage()` 方法加载该图像。即使传入的 `image ` 是 `CanvasImageData ` 对象，所绘制的图像仍受当前上下文剪切路径的限制。

另请参阅 CanvasImageData 、Image 、Canvas::loadImage()、Canvas::isImageLoaded 、Canvas::imageLoaded 以及W3C 2D 上下文标准中关于 drawImage 的说明。

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

在由左上角坐标 (x,y)、宽度w 和高度h 定义的边界矩形内创建一个椭圆，并将其作为闭合子路径添加到路径中。

该椭圆由一条顺时针曲线组成，起始点和终点均为零度（即3点钟位置）。

Context2D fill()

使用当前填充样式填充子路径。

另请参阅 W3C 2D 绘图环境标准中关于填充的部分以及fillStyle 。

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

使用fillStyle 绘制由(x 、y 、w 、h)指定的矩形区域。

另请参阅 fillStyle 。

Context2D fillText(text, x, y)

在指定位置（x 、y ）填充指定的text 。

另请参阅 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 。

bool isPointInPath(real x, real y)

如果点 (x,y) 位于当前路径中，则返回true 。

另请参阅 W3C 2D 上下文标准中关于 isPointInPath 的说明。

Context2D lineTo(real x, real y)

从当前位置到坐标为 (x,y) 的点绘制一条直线。

var measureText(text)

返回一个具有width 属性的对象，该属性的值等同于在当前字体中调用QFontMetrics::horizontalAdvance()并传入给定的text 参数。

Context2D moveTo(real x, real y)

创建一个新的子路径，其一个点位于 (x,y)。

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

将给定imageData 对象中的数据绘制到坐标为(dx,dy)的画布上。

如果提供了“脏矩形”（dirtyX,dirtyY,dirtyWidth,dirtyHeight ），则仅绘制该矩形内的像素。

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

在当前点与终点之间添加一条二次贝塞尔曲线（x ，y ），其控制点由（cpx ，cpy ）指定。

另请参阅 W3C 2D 环境标准中关于 quadraticCurveTo 的说明。

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

在坐标 (x,y) 处添加一个矩形，其宽度为w ，高度为h ，作为闭合子路径。

Context2D reset()

将上下文状态和属性重置为默认值。

Context2D resetTransform()

将变换矩阵重置为默认值（相当于调用setTransform （1 、0 、0 、1 、0 、0 ））。

另请参阅 transform()、setTransform() 以及reset()。

Context2D restore()

弹出栈顶的状态，并将上下文恢复到该状态。

另请参阅 save()。

Context2D rotate(real angle)

将画布围绕当前原点以angle （单位为弧度）的角进行顺时针旋转。

ctx.rotate(Math.PI/2);

旋转变换矩阵如下：

其中旋转角度angle 以弧度为单位。

Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

将一个圆角矩形添加到路径中，该矩形由 (x 、y 、w 、h) 指定。参数xRadius 和yRadius 指定定义圆角矩形各角的椭圆半径。

Context2D save()

将当前状态压入状态栈。

在更改任何状态属性之前，应保存当前状态以便日后参考。上下文维护着一个绘图状态栈。每个状态由当前变换矩阵、裁剪区域以及以下属性的值组成：

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

当前路径不属于绘图状态的一部分。可以通过调用beginPath()方法来重置路径。

Context2D scale(real x, real y)

通过将缩放因子乘以当前变换矩阵，来增大或缩小画布网格中每个单元格的大小。x 是水平方向的缩放因子，y 是垂直方向的缩放因子。

以下代码将画布上绘制的对象的水平尺寸扩大一倍，同时将其垂直尺寸缩小一半：

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] void setLineDash(array 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 。

Context2D setTransform(real a, real b, real c, real d, real e, real f)

将变换矩阵更改为由以下参数指定的矩阵。

直接修改变换矩阵可让您一步完成缩放、旋转和平移变换。

在绘制任何内容之前，画布上的每个点都会先与该矩阵相乘。HTML Canvas 2D 上下文规范将变换矩阵定义为：

其中：

• a 是水平（x）方向的缩放因子

  

• c 是 x 方向的倾斜因子

  

• e 是 x 方向的平移量

  

• b 是 y（垂直）方向的倾斜因子

  

• d 是y方向的缩放因子

  

• f 是y方向的平移量

  

• 最后一行保持不变

缩放因子和倾斜因子均为倍数；e 和f 是坐标系单位，与 translate(x,y) 方法中的单位相同。

另请参阅 transform()。

Context2D shear(real sh, real sv)

将变换矩阵沿水平方向按sh 进行剪切，沿垂直方向按sv 进行剪切。

Context2D stroke()

使用当前笔画样式绘制子路径。

另请参阅 strokeStyle 以及W3C 2D 绘图环境标准中关于描边的说明。

Context2D strokeRect(real x, real y, real w, real h)

使用strokeStyle 、lineWidth 、lineJoin 以及（如适用）miterLimit 属性，绘制由(x 、y 、w 、h)指定的矩形路径。

另请参阅 strokeStyle 、lineWidth 、lineJoin 以及miterLimit 。

Context2D strokeText(text, x, y)

在由 (x,y) 指定的位置上，对给定的text 进行描边。

另请参阅 font 、textAlign 、textBaseline 以及fillText 。

Context2D text(string text, real x, real y)

将给定的text 作为由当前上下文字体生成的闭合子路径集添加到路径中。

这些子路径的位置将调整为：文本基线的左端位于由 (x,y) 指定的点上。

Context2D 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()。

Context2D translate(real x, real y)

将画布的原点沿水平方向平移x ，沿垂直方向平移y （单位为坐标系单位）。

通过平移原点，您可以在画布上绘制不同对象的图案，而无需为每个形状手动测量坐标。