Qt6 QML Book/画布/图像

Images

图像

The QML canvas supports image drawing from several sources. To use an image inside the canvas the image needs to be loaded first. We use the Component.onCompleted handler to load the image in our example below.

QML画布支持从多个源绘制图像。要在画布中使用图像，首先需要使用加载图像。在下面的示例中，我们使用Component.onCompleted处理程序加载图像。

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

    // draw an image
    ctx.drawImage('assets/ball.png', 10, 10)

    // store current context setup
    ctx.save()
    ctx.strokeStyle = '#ff2a68'
    // create a triangle as clip region
    ctx.beginPath()
    ctx.moveTo(110,10)
    ctx.lineTo(155,10)
    ctx.lineTo(135,55)
    ctx.closePath()
    // translate coordinate system
    ctx.clip()  // create clip from the path
    // draw image with clip applied
    ctx.drawImage('assets/ball.png', 100, 10)
    // draw stroke around path
    ctx.stroke()
    // restore previous context
    ctx.restore()

}

Component.onCompleted: {
    loadImage("assets/ball.png")
}

The left shows our ball image painted at the top-left position of 10x10. The right image shows the ball with a clipping path applied. Images and any other path can be clipped using another path. The clipping is applied by defining a path and calling the clip() function. All following drawing operations will now be clipped by this path. The clipping is disabled again by restoring the previous state or by setting the clip region to the whole canvas.

左图显示了在左上角10x10位置绘制的球图像。右图显示应用了剪裁路径的球。可以使用其他路径剪裁图像和任何其他路径。通过定义路径并调用clip（）函数应用剪裁。下面的所有绘图操作现在都将被此路径剪裁。通过恢复以前的状态或将剪辑区域设置为整个画布，可以再次禁用剪辑。

   示例源码下载