Context2D QML Type

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

该属性只读。

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

另请参阅 fillStyle 。

保存当前用于填充形状的样式。样式可以是包含 CSS 颜色的字符串、CanvasGradient 或 CanvasPattern 对象。无效值将被忽略。该属性接受多种颜色语法：

• rgb（红、绿、蓝）"--例如："rgb（255, 100, 55）"或 "rgb（100%, 70%, 30%)
• rgba（红、绿、蓝、alpha）' - 例如：'rgb（255, 100, 55, 1.0）'或'rgb（100%, 70%, 30%, 0.5）
• hsl（色相、饱和度、亮度）
• hsla（色相、饱和度、明度、alpha）
• '#RRGGBB'--例如：'#00FFCC
• Qt.rgba(red, green, blue, alpha) - 例如：'#00FFCC'：Qt.rgba(0.3, 0.7, 1, 1.0) - 例如： Qt.rgba(0.3, 0.7, 1, 1.0)

如果在一个循环中多次分配fillStyle 或strokeStyle ，应选择最后的 Qt.rgba() 语法，因为它具有最佳性能，因为它已经是一个有效的QColor 值，不需要每次都进行解析。

默认值为 "#000000"。

另请参阅 createLinearGradient()、createRadialGradient()、createPattern() 和strokeStyle 。

保存当前字体设置。

支持w3C 2d 上下文字体标准的子集：

• font-style（可选）：正体 | 斜体 | 斜体
• font-variant（可选）：正常字体 | 小大写字母
• font-weight （可选）： 正常 | 粗体 | 1 ... 1000
• font-size：Npx | Npt（其中 N 为正数）
• font-family：请参见http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

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

保存当前应用于渲染操作的 alpha 值。该值的范围必须从0.0 （完全透明）到1.0 （完全不透明）。默认值为1.0 。

保存当前的合成操作。允许的操作有

遵照 W3C 标准，所需模式之外的扩展组成模式以 "vendorName-operationName "语法提供，例如：QPainter::CompositionMode_Exclusion ，以 "qt-exclusion "提供。

保持当前行上限样式。可能的行上限样式有

其他值将被忽略。

保存当前的折线偏移量。默认的折线偏移值是0 。

该属性在 QtQuick 2.11 中引入。

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

当前行连接样式。连接存在于两个连续行共享的子路径中的任意一点。当子路径关闭时，在连接子路径中第一行和最后一行的第一点（相当于最后一点）也存在连接。

可能的连接线样式有

其他值将被忽略。

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

保持当前的斜切限幅比。默认值为 10.0。

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

保留当前阴影颜色。

保持当前阴影的正水平偏移量。

另请参阅 shadowOffsetY 。

以垂直正距离保持当前阴影偏移。

另请参阅 shadowOffsetX 。

样式可以是包含 CSS 颜色的字符串，也可以是CanvasGradient 或 CanvasPattern 对象。无效值将被忽略。

默认值为 "#000000"。

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

保持当前文本对齐设置。可能的值有

其他值将被忽略。

保持当前的基线对齐设置。可能的值有

其他值将被忽略。默认值为 "字母"。

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

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

上图中每条弧的anticlockwise 参数都是false ，因为它们都是按顺时针方向绘制的。

有关 arc() 的内容，请参阅 arcTo 和W3C 的 2D 上下文标准。

以给定的控制点和半径在当前子路径上添加一条弧线，该弧线通过一条直线与前一点相连。绘制弧线的步骤与创建直线相同：

• 调用beginPath() 方法设置新路径。
• 调用moveTo(x,y) 方法，将画布上的起始位置设置为 (x,y) 点。
• 要绘制弧或圆，请调用 arcTo(x1,y1,x2,y2,radius) 方法。这会在当前子路径上添加一条起点为 (x1,y1) 、终点为 (x2,y2) 和radius 的弧线，并用一条直线将其与前一个子路径连接起来。

另请参阅 arc 和W3C 的 2D 上下文标准中的 arcTo()。

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

使用 (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();

另请参见 BezierCurveTo 的 W3C 2d 上下文标准和使用 bezierCurveTo 的美丽花朵演示。

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

从当前路径创建剪切区域。不显示剪切路径以外的任何形状部分。使用clip() 方法创建复杂形状：

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

新形状就会显示出来。下面展示了剪切路径如何修改图像的显示方式：

另请参阅 beginPath(),closePath(),stroke(),fill() 和W3C 2d 上下文剪辑标准。

通过在子路径的起点画一条线来关闭当前子路径，自动开始一条新路径。新路径的当前点是前一个子路径的第一个点。

另请参阅 W3C 2d 上下文标准中的 closePath。

返回CanvasGradient 对象，该对象表示围绕中心点（x,y ）逆时针插值的锥形渐变色，起始角度angle ，单位为弧度。

另请参阅 CanvasGradient::addColorStop(),createLinearGradient(),createRadialGradient(),createPattern(),fillStyle, 和strokeStyle 。

创建与imageData 参数尺寸相同的CanvasImageData 对象。

使用从imageUrl 加载的给定图像创建CanvasImageData 对象。

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

以给定的尺寸 (sw,sh) 创建CanvasImageData 对象。

返回一个CanvasGradient 对象，该对象表示线性渐变，在起点 (x0,y0) 和终点 (x1,y1) 之间沿线过渡颜色。

梯度是颜色之间的平滑过渡。渐变有两种类型：线性渐变和径向渐变。渐变必须有两个或两个以上的色站，代表在渐变的起点和终点或圆圈之间从 0 到 1 的颜色移动。

另请参阅 CanvasGradient::addColorStop()、createRadialGradient()、createConicalGradient()、createPattern()、fillStyle 和strokeStyle 。

返回一个 CanvasPattern 对象，该对象使用给定的图像并按重复参数指定的方向重复。

image 参数必须是有效的图像项、有效的CanvasImageData 对象或加载的图像 url。如果没有图像数据，函数将产生 INVALID_STATE_ERR 异常。

repetition 的允许值为

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

另请参阅 strokeStyle 和fillStyle 。

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

另请参阅 Qt::BrushStyle 。

返回一个CanvasGradient 对象，该对象表示一个径向渐变效果，该效果沿圆锥形绘制，圆锥形的起点为原点 (x0,y0) ，半径为r0 ，终点为原点 (x1,y1) ，半径为r1 。

另请参见 CanvasGradient::addColorStop(),createLinearGradient(),createConicalGradient(),createPattern(),fillStyle, 和strokeStyle 。

在画布上的位置 (dx,dy) 绘制给定的image 。注：image 类型可以是图像项、图像 url 或CanvasImageData 对象。如果给出的是图像项，如果图像未完全加载，本方法不会绘制任何内容。如果提供的是 url 字符串，则应首先调用 Canvas 项的Canvas::loadImage() 方法加载图像。即使给定的image 是CanvasImageData 对象，该图像的绘制也受当前上下文剪辑路径的限制。

另请参阅 CanvasImageData,Image,Canvas::loadImage,Canvas::isImageLoaded,Canvas::imageLoaded 以及W3C 2d 上下文标准中的 drawImage。

这是一个重载函数。在画布上的点 (dx,dy) 以image 的形式绘制给定项目，宽度为dw ，高度为dh 。

注：image 类型可以是图像项、图像 url 或CanvasImageData 对象。如果以图像项的形式给出，如果图像没有完全加载，此方法不会绘制任何图像。如果提供的是 url 字符串，则应首先调用 Canvas item 的Canvas::loadImage() 方法加载图像。即使给定的image 是CanvasImageData 对象，该图像的绘制也受当前上下文剪辑路径的限制。

另请参阅 CanvasImageData,Image,Canvas::loadImage(),Canvas::isImageLoaded,Canvas::imageLoaded 以及W3C 2d 上下文标准中的 drawImage。

这是一个重载函数。从源点 (sx,sy) 和源宽度sw, 源高度sh 将给定项目以image 的形式绘制到画布上的点 (dx,dy) 和宽度dw, 高度dh 上。

注：image 类型可以是图像或画布项、图像 url 或CanvasImageData 对象。如果给出的是图像项，如果图像未完全加载，本方法不会绘制任何图像。如果提供的是 url 字符串，则应首先调用 Canvas 项的Canvas::loadImage() 方法加载图像。即使给定的image 是CanvasImageData 对象，该图像的绘制也受当前上下文剪辑路径的限制。

另请参阅 CanvasImageData,Image,Canvas::loadImage(),Canvas::isImageLoaded,Canvas::imageLoaded, 以及W3C 2d 上下文标准中的 drawImage。

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

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

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

另请参阅 W3C 2d 上下文标准中的填充和fillStyle 。

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

另请参阅 fillStyle 。

在给定位置 (x,y) 填充指定的text 。

另请参阅 font,textAlign,textBaseline 和strokeText 。

返回CanvasImageData 对象，其中包含由 (x,y,w,h) 指定的画布矩形的图像数据。

返回代表直线破折号模式的 qreals 数组。

此方法在 QtQuick 2.11 中引入。

另请参阅 setLineDash() 和lineDashOffset 。

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

另请参阅 W3C 2d 上下文标准中的 isPointInPath。

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

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

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

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

如果提供了一个脏矩形 (dirtyX,dirtyY,dirtyWidth,dirtyHeight) ，则只绘制该矩形中的像素。

在当前点和端点 (x,y) 之间添加一条二次贝塞尔曲线，控制点由 (cpx,cpy) 指定。

另请参阅 W3C 2d 上下文标准中的 quadraticCurveTo。

在位置 (x,y) 处添加宽度为w 、高度为h 的矩形，作为封闭子路径。

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

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

另请参阅 transform() 、setTransform() 和reset() 。

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

另请参阅 save() 。

将画布绕当前原点旋转angle ，以弧度和顺时针方向为单位。

ctx.rotate(Math.PI/2);

旋转变换矩阵如下

其中angle 的旋转单位为弧度。

在路径上添加一个圆角矩形，由 (x,y,w,h) 指定。xRadius 和yRadius 参数指定了定义圆角矩形四角的椭圆半径。

将当前状态推入状态栈。

在更改任何状态属性之前，应保存当前状态以备将来参考。上下文会维护一个绘图状态堆栈。每个状态由当前变换矩阵、剪切区域和以下属性值组成：

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

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

x 是水平方向的比例因子，y 是垂直方向的比例因子。

以下代码会将画布上绘制的对象的水平尺寸增加一倍，垂直尺寸减半：

ctx.scale(2.0, 0.5);

将破折号图案设置为给定的图案。

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 。

如下所述，将变换矩阵更改为参数给定的矩阵。

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

画布上的每个点在绘制之前都要乘以矩阵。HTML 画布 2D 上下文规范将变换矩阵定义为

其中

• a 是水平 (x) 方向的缩放因子

  

• c 是 x 方向上的倾斜系数

  

• e 是 x 方向上的平移系数

  

• b 是在（垂直）Y 方向上的倾斜因子

  

• d 是 Y 方向上的比例因子

  

• f 是沿 y 轴方向的平移量

  

• 最后一行保持不变

比例因子和倾斜因子是倍数；e 和f 是坐标空间单位，就像 translate(x,y) 方法中的单位一样。

另请参见 transform().

将变换矩阵在水平方向上剪切sh ，在垂直方向上剪切sv 。

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

另请参阅 strokeStyle 和W3C 2d 上下文描边标准。

使用strokeStyle,lineWidth,lineJoin 和（如适用）miterLimit 属性绘制 (x,y,w,h) 所指定矩形的路径。

另请参阅 strokeStyle,lineWidth,lineJoin 和miterLimit 。

在 (x,y) 指定的位置删除给定的text 。

另请参阅 font,textAlign,textBaseline, 和fillText 。

将给定的text 添加到路径中，作为从提供的当前上下文字体创建的一组封闭子路径。

子路径的定位是使文本基线的左端位于 (x,y) 指定的点上。

该方法与setTransform() 非常相似，但不是替换旧的变换矩阵，而是将给定的变换矩阵乘以当前矩阵。

setTransform(a,b,c,d,e,f) 方法实际上是将当前变换重置为标识矩阵，然后以相同的参数调用 transform(a,b,c,d,e,f) 方法。

另请参见 setTransform().

以坐标空间为单位，将画布的原点水平移动x ，垂直移动y 。

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