Qt6 QML Book/画布/画布元素类型

Canvas Element

画布元素类型

On of the strenghts of QML is its closeness to the Javascript ecosystem. This lets us reuse existing solutions from the web world and combine it with the native performance of QML visuals. However, sometimes we want to reuse graphics solutions from the web space too. That is where the Canvas element comes in handy. The canvas element provides an API very closely aligned to the drawing APIs for the identically named HTML element.

QML的一个优点是它与Javascript生态系统的密切关系。这使我们能够重用来自web世界的现有解决方案，并将其与QML visuals的本机性能相结合。然而，有时我们也希望重用web空间中的图形解决方案。这就是Canvas元素类型派上用场的地方。canvas元素类型提供了一个与同名HTML元素，非常接近的绘图API。

The fundamental idea of the canvas element is to render paths using a context 2D object. The context 2D object, contains the necessary graphics functions, whereas the canvas acts as the drawing canvas. The 2D context supports strokes, fills gradients, text and a different set of path creation commands.

canvas元素类型的基本思想是使用上下文2D对象渲染路径。上下文2D对象包含必要的图形功能，而画布充当绘图画布。二维上下文支持笔划、填充渐变、文本和一组不同的路径创建命令。

Let’s see an example of a simple path drawing:

让我们看一个简单路径图的示例：

import QtQuick

Canvas {
    id: root
    // canvas size
    width: 200; height: 200
    // handler to override for drawing
    onPaint: {
        // get context to draw with
        var ctx = getContext("2d")
        // setup the stroke
        ctx.lineWidth = 4
        ctx.strokeStyle = "blue"
        // setup the fill
        ctx.fillStyle = "steelblue"
        // begin a new path to draw
        ctx.beginPath()
        // top-left start point
        ctx.moveTo(50,50)
        // upper line
        ctx.lineTo(150,50)
        // right line
        ctx.lineTo(150,150)
        // bottom line
        ctx.lineTo(50,150)
        // left line through path closing
        ctx.closePath()
        // fill using fill style
        ctx.fill()
        // stroke using line width and stroke style
        ctx.stroke()
    }
}

This produces a filled rectangle with a starting point at 50,50 and a size of 100 and a stroke used as a border decoration.

这将生成一个填充矩形，起点为50,50，大小为100，笔划用作边框装饰。

The stroke width is set to 4 and uses a blue color define by strokeStyle. The final shape is set up to be filled through the fillStyle to a “steel blue” color. Only by calling stroke or fill the actual path will be drawn and they can be used independently from each other. A call to stroke or fill will draw the current path. It’s not possible to store a path for later reuse only a drawing state can be stored and restored.

笔划宽度设置为4，并使用由strokeStyle定义的蓝色。最终形状通过fillStyle填充为“钢蓝色”。只有通过调用stroke或fill，才能绘制实际路径，并且它们可以相互独立使用。调用笔划stroke或填充fill将绘制当前路径。无法存储路径以供以后重用，只能存储和恢复图形状态。

In QML the Canvas element acts as a container for the drawing. The 2D context object provides the actual drawing operation. The actual drawing needs to be done inside the onPaint event handler.

在QML中，画布元素Canvas 充当图形的容器。二维上下文对象提供实际的图形操作。实际绘图需要在onPaint事件处理程序内完成。

Canvas {
    width: 200; height: 200
    onPaint: {
        var ctx = getContext("2d")
        // setup your path
        // fill or/and stroke
    }
}

The canvas itself provides a typical two-dimensional Cartesian coordinate system, where the top-left is the (0,0) point. A higher y-value goes down and a hight x-value goes to the right.

画布本身提供了一个典型的二维笛卡尔坐标系，其中左上角是（0,0）点。较高的y值向下移动，较高的x值向右移动。

A typical order of commands for this path based API is the following:

基于此API的路径，典型绘制命令顺序如下：

1. Setup stroke and/or fill 设置笔划或填充
2. Create path 创建路径
3. Stroke and/or fill 调用stroke或fill

onPaint: {
    var ctx = getContext("2d")

    // setup the stroke
    ctx.strokeStyle = "red"

    // create a path
    ctx.beginPath()
    ctx.moveTo(50,50)
    ctx.lineTo(150,50)

    // stroke path
    ctx.stroke()
}

This produces a horizontal stroked line from point P1(50,50) to point P2(150,50).

这将产生从点P1（50,50）到点P2（150,50）的水平线。

TIP

注

Typically you always want to set a start point when you reset your path, so the first operation after beginPath is often moveTo.

通常，在重置路径时，您总是希望设置起点，因此beginPath之后的第一个操作通常是moveTo。