QML类型：Context2D

一、描述

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

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

Context2D API 实现了相同的 W3C Canvas 2D Context API 标准，但具有一些增强功能。

Context2D API 提供了渲染上下文，它定义了在 Canvas 项目上绘制所需的方法和属性。以下将画布渲染上下文分配给 context 变量：

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

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

二、属性成员

1、canvas : QtQuick::Canvas

只读属性。保存上下文绘制的画布项目。

2、fillRule : enumeration

保存用于填充形状的当前填充规则。

Qt.OddEvenFill
Qt.WindingFill（默认）

填充规则。

3、fillStyle : variant

保存用于填充形状的当前样式。样式可以是包含 CSS 颜色的字符串、CanvasGradient 或 CanvasPattern 对象。忽略无效值。默认值为“#000000”。

此属性接受多种颜色语法：

'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(hue, saturation, lightness)'：'hsl（色调，饱和度，亮度）'
'hsla(hue, saturation, lightness, alpha)'：'hsla（色调，饱和度，亮度，alpha）'
'#RRGGBB'——例如：'#00FFCC'
Qt.rgba(red, green, blue, alpha)——例如：Qt.rgba(0.3, 0.7, 1, 1.0)

4、font : string

保存当前字体设置。默认字体值为“10px sans-serif”。

5、globalAlpha : real

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

6、globalCompositeOperation : string

保存当前当前的合成操作。

其值见 Canvas之globalCompositeOperation属性。

此外，该属性还接受 QPainter::CompositionMode 中列出的合成模式。根据 W3C 标准，这些扩展组合模式以“vendorName-operationName”语法提供，例如：QPainter::CompositionMode_Exclusion 提供为“qt-exclusion”。

7、lineCap : string

保持当前的线帽样式。线帽样式。

8、lineDashOffset : real

保存当前行的虚线偏移量。默认为 0。

9、lineJoin : string

保留当前的线连接样式。lineJoin 属性。

10、lineWidth : real

保存当前线宽。

11、miterLimit : real

保持当前的斜接限制比率。默认为 10.0。miterLimit 属性。

12、shadowBlur : real

应用于阴影的模糊级别。

13、shadowColor : string

当前的阴影颜色。

14、shadowOffsetX : qreal

shadowOffsetY : qreal

水平、垂直方向的阴影偏移。

15、strokeStyle : variant

线条颜色或样式，默认值为“#000000”。strokeStyle 属性。

16、textAlign : string

保存当前的文本对齐设置。默认是“start”。textAlign 属性。

17、textBaseline : string

保存当前基线对齐设置。textBaseline 属性。

三、成员函数

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

将圆弧添加到当前子路径，该圆弧位于圆心位于 (x, y) 点且 radius 为半径的圆的圆周上。

startAngle 和 endAngle 都是从 x 轴以弧度为单位测量的。anticlockwise表示是否是逆时针。

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 640
    height: 480

    Canvas
    {
        id: root2
        width: parent.width;
        height: parent.height;
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4
            ctx.beginPath()
            ctx.arc(100,75,50,0,2*Math.PI);
            ctx.stroke();

            ctx.beginPath()
            ctx.arc(330,75,50,0,Math.PI);
            ctx.stroke();

            ctx.beginPath()
            ctx.arc(530,75,50,0,Math.PI,true);
            ctx.stroke();
        }
    }
}

2、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 的圆弧，并通过直线将其连接到前一个子路径。

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 640
    height: 480

    Canvas
    {
        id: root2
        width: parent.width;
        height: parent.height;
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4
            ctx.beginPath();
            ctx.moveTo(20,20);
            ctx.lineTo(100,20);          // 绘制一条水平线
            ctx.arcTo(150,20,150,70,50); // 绘制弧
            ctx.lineTo(150,120);         // 绘制一条垂直线
            ctx.stroke();
        }
    }
}

3、object beginPath()

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

4、object bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

使用由 (cp1x, cp1y) 和 (cp2x, cp2y) 指定的控制点在当前位置和给定端点之间添加三次贝塞尔曲线。添加曲线后，当前位置更新为曲线的终点（x，y）。

以下代码生成如下所示的路径：

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 640
    height: 480

    Canvas
    {
        id: root2
        width: parent.width;
        height: parent.height;
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4
            ctx.beginPath();
            ctx.beginPath();
            ctx.moveTo(20, 0);
            ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
            ctx.stroke();
        }
    }
}

5、object clearRect(real x, real y, real w, real h)

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

6、object clip()

从当前路径创建裁剪区域。裁剪路径之外的任何形状部分都不会显示。

使用 clip() 方法创建一个复杂的形状：

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

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4
            ctx.rect(50,20,200,120);
            ctx.stroke();
            ctx.clip();
            ctx.fillStyle="green";
            ctx.fillRect(0,0,150,100);
        }
    }
}

7、object closePath()

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

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4
            ctx.beginPath();
            ctx.moveTo(20,20);
            ctx.lineTo(20,100);
            ctx.lineTo(70,100);
            ctx.closePath();
            ctx.stroke();
        }
    }
}

8、object createConicalGradient(real x, real y, real angle)

返回一个 CanvasGradient 对象，该对象表示以弧度为单位的起始角角度围绕中心点 (x, y) 逆时针插入颜色的锥形渐变。

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4
            var grd = ctx.createConicalGradient(50,50,180 * Math.PI / 180); // 设置起点为9点方向
            grd.addColorStop(0,"red");
            grd.addColorStop(0.25,"green");
            grd.addColorStop(0.5,"blue");
            grd.addColorStop(0.75,"black");
            grd.addColorStop(1.0,"red");
            ctx.fillStyle = grd;
            ctx.fillRect(0,0,50*2,50*2);
        }
    }
}

9、CanvasImageData createImageData(Url imageUrl)

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

imageUrl 必须在此函数调用之前已经加载，否则将返回一个空的 CanvasImageData 对象。

CanvasImageData 对象保存图像像素数据，具有存储在该对象中的数据的实际维度，并以 RGBA 顺序保存包含数据的一维数组，值的范围为 0 到 255。

载入图片并处理为灰度效果：

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4

            var ImageData = ctx.createImageData("qrc:/img/a.jpg")
            for (var i = 0; i < ImageData.data.length; i += 4) 
            {
                var avg = (ImageData.data[i] + ImageData.data[i + 1] + ImageData.data[i + 2]) / 3;
                ImageData.data[i]     = avg;    // red
                ImageData.data[i + 1] = avg;    // green
                ImageData.data[i + 2] = avg;    // blue
            }

            var imge = ctx.createPattern(ImageData, "repeat")
            ctx.fillStyle = imge            

            ctx.beginPath()
            ctx.moveTo(200,30)
            ctx.lineTo(150,80)
            ctx.lineTo(150,130)
            ctx.lineTo(250,130)
            ctx.lineTo(250,80)
            ctx.closePath()
            ctx.fill()
        }

        Component.onCompleted:
        {
            root2.loadImage("qrc:/img/a.jpg")
        }

        onImageLoaded:
        {
            requestPaint()
        }
    }
}

10、CanvasImageData createImageData(CanvasImageData imageData)

创建一个与参数具有相同维度的 CanvasImageData 对象。

CanvasImageData createImageData(real sw, real sh)

创建一个具有给定维度 (sw, sh) 的 CanvasImageData 对象。

11、object createLinearGradient(real x0, real y0, real x1, real y1)

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

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4

            var grd=ctx.createLinearGradient(0,0,170,0);
            grd.addColorStop(0,"black");
            grd.addColorStop(0.5,"red");
            grd.addColorStop(0.8,"blue");
            grd.addColorStop(1,"white");

            ctx.fillStyle=grd;
            ctx.fillRect(20,20,150,100);
        }
    }
}

12、variant createPattern(Image image, string repetition)

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

image 参数必须是有效的 Image 项、有效的 CanvasImageData 对象或加载的图像 url，如果没有图像数据，则抛出 INVALID_STATE_ERR 异常。

参数2：

“repeat”：两个方向
"repeat-x”：仅水平
"repeat-y"：仅垂直
“no-repeat”：都不是

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

13、variant createPattern(color color, enumeration patternMode)

返回一个使用给定颜色和模式模式的 CanvasPattern 对象。

有效的模式模式是：

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

见 QBrush。

14、object createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)

返回一个表示辐射渐变的 CanvasGradient 对象，该对象沿由起点为 (x0, y0) 和半径为 r0 的起始圆和以原点 (x1, y1) 和半径为 r1 的结束圆给定的圆锥体绘制。

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4

            var grd=ctx.createRadialGradient(75,50,5,90,60,100);
            grd.addColorStop(0,"red");
            grd.addColorStop(0.5,"#128bf1");
            grd.addColorStop(1,"white");

            ctx.fillStyle=grd;
            ctx.fillRect(10,10,150,100);
        }
    }
}

15、drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)

从源点 (sx, sy) 和源宽度 sw, 源高度 sh 将给定的项目作为图像绘制到画布上的点 (dx, dy) 和宽度 dw, 高度 dh。被绘制的图像受当前上下文裁剪路径的影响。

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

将给定的项目作为图像绘制到画布上的点 (dx, dy) 上，宽度为 dw，高度为 dh。

drawImage(variant image, real dx, real dy)

在画布上的位置 (dx, dy) 绘制给定的图像。

图像类型可以是 Image 或 Canvas 项、图像 url 或 CanvasImageData 对象。

当为 Image 项时，如果图像未完全加载，则此方法不绘制任何内容。
当为 url 字符串时，应该首先调用 Canvas::loadImage() 来加载图像。

16、object ellipse(real x, real y, real w, real h)

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

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

17、object fill()

使用 fillStyle 填充子路径。

18、object fillRect(real x, real y, real w, real h)

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

19、object fillText(text, x, y)

使用 fillStyle 在给定位置 (x, y) 填充指定文本。

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 4

            ctx.font="20px Georgia";
            ctx.fillText("Hello World!",10,50);
            ctx.font="30px Verdana";

            var gradient=ctx.createLinearGradient(0,0,root2.width,0);
            gradient.addColorStop("0","magenta");
            gradient.addColorStop("0.5","blue");
            gradient.addColorStop("1.0","red");
            ctx.fillStyle=gradient;
            ctx.fillText("Hello World!",10,90);
        }
    }
}

20、CanvasImageData getImageData(real x, real y, real w, real h)

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

21、setLineDash(array pattern)

设置将虚线图案。参数是指定距离以交替绘制线条和间隙的数字列表。

如果数组中的元素数为奇数，则数组的元素将被复制和连接。例如，[5, 15, 25] 将变成 [5, 15, 25, 5, 15, 25]。

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"

            ctx.setLineDash( [5, 15, 25] );  //实线部分和间隔部分依次是 [5,15,25,5,15,25]
            ctx.moveTo( 10, 10 );
            ctx.lineTo( 310, 10 );
            ctx.stroke();
        }
    }
}

ctx.setLineDash( [10] );

array getLineDash()

返回表示线条的虚线图案的 qreals 数组。

22、object isPointInPath(real x, real y)

点(x, y) 是否在当前路径中。

23、object lineTo(real x, real y)

从当前位置到 (x, y) 的点画一条线。

24、object measureText(text)

返回的对象包含以像素计的指定字体的文本宽度。

其值等同于使用当前字体的给定文本调用 QFontMetrics::horizontalAdvance()。

25、object moveTo(real x, real y)

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

26、object putImageData(CanvasImageData imageData, real dx, real dy, realdirtyX, realdirtyY, realdirtyWidth, realdirtyHeight)

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

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

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

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

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

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

29、object reset()

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

30、object resetTransform()

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

31、object save()

将当前状态压入状态堆栈。

在更改任何状态属性之前，应该保存当前状态以备将来参考。上下文维护着一堆绘图状态。

每个状态由当前变换矩阵、裁剪区域和以下属性的值组成：

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

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

object restore()

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

32、object rotate(real angle)

以弧度 angle 和顺时针方向围绕当前原点旋转画布。

ctx.rotate(Math.PI/2);

33、object roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

向路径添加由 (x, y, w, h) 指定的圆角矩形。xRadius 和 yRadius 参数指定定义圆角矩形角的椭圆的半径。

34、object scale(real x, real y)

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

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"

            ctx.save()
            ctx.strokeRect(5,5,25,15);
            ctx.scale(2,2);
            ctx.strokeRect(5,5,25,15);
            ctx.scale(2,2);
            ctx.strokeRect(5,5,25,15);
            ctx.scale(2,2);
            ctx.strokeRect(5,5,25,15);
            ctx.restore()

            ctx.strokeRect(250,5,25,15);
        }
    }
}

35、object setTransform(real a, real b, real c, real d, real e, real f)

设置变换矩阵。在绘制任何东西之前，画布上的每个点都乘以矩阵。

直接修改变换矩阵能够在一个就步骤中执行缩放、旋转和平移变换。

a 是水平 (x) 方向的比例因子

c 是 x 方向的倾斜因子

e 是 x 方向的平移

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

d 是 y 方向的比例因子

f 是 y 方向的平移

比例因子和偏斜因子是倍数；e 和 f 是坐标空间单位。

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"

            ctx.fillStyle="yellow";
            ctx.fillRect(0,0,250,100)

            ctx.setTransform(1,0.5,-0.5,1,30,10);
            ctx.fillStyle="red";
            ctx.fillRect(0,0,250,100);

            ctx.setTransform(1,0.5,-0.5,1,30,50);
            ctx.fillStyle="blue";
            ctx.fillRect(0,0,250,100);
        }
    }
}

36、object shear(real sh, real sv)

错切变换。

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")

            ctx.fillStyle="yellow";
            ctx.fillRect(0,0,250,100)

            ctx.shear(0.5,0.5)
            ctx.fillStyle="blue";
            ctx.fillRect(0,150,250,100)
        }
    }
}

37、object stroke()

使用当前笔触样式对子路径进行描边。

38、object strokeRect(real x, real y, real w, real h)

对由 (x, y, w, h) 指定的矩形的路径进行描边。

39、object strokeText(text, x, y)

在 (x, y) 指定的位置对给定文本进行描边。

40、object text(string text, real x, real y)

将给定的文本作为一组封闭子路径添加到路径中。

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

和fill比较：

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 480
    title: "测试"

    Canvas
    {
        id: root2
        anchors.fill: parent
        onPaint:
        {
            var ctx = getContext("2d")
            ctx.strokeStyle = "blue"
            ctx.lineWidth = 2

            ctx.fillStyle="red";
            ctx.text("黄河之水天上来",300,20)
            ctx.stroke()
            ctx.fillText("黄河之水天上来",400,20)
        }
    }
}

41、object transform(real a, real b, real c, real d, real e, real f)

setTransform() ：替换旧的变换矩阵。

transform()：而是将给定的变换矩阵应用于当前矩阵。即 transform() 的行为相对于由 rotate()、scale()、translate()、transform() 完成的其他变换。例：如果已经将画布设置为放到两倍，transform() 设置把绘图放大两倍，画布最终将放大四倍。

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

42、object translate(real x, real y)

平移画布的原点。