Qt Quick 示例 - 画布

这是一个 QML 画布示例的集合。

画布是一组与画布类型相关的 QML 小示例。每个示例都是一个强调特定类型或功能的简单 QML 文件。

运行示例

要从 Qt Creator 运行示例，请打开欢迎模式并从示例中选择示例。有关更多信息，请参阅构建和运行示例。

红心

红心使用 bezier 曲线 API 来描边和填充一个红色的心。

ctx.beginPath()
ctx.moveTo(75,40)
ctx.bezierCurveTo(75,37,70,25,50,25)
ctx.bezierCurveTo(20,25,20,62.5,20,62.5)
ctx.bezierCurveTo(20,80,40,102,75,120)
ctx.bezierCurveTo(110,102,130,80,130,62.5)
ctx.bezierCurveTo(130,62.5,130,25,100,25)
ctx.bezierCurveTo(85,25,75,37,75,40)
ctx.closePath()

话泡

话泡使用 quadraticCurveTo() API 来描边和填充一个定制的話泡。

ctx.beginPath()
ctx.moveTo(75, 25)
ctx.quadraticCurveTo(25, 25, 25, 62.5)
ctx.quadraticCurveTo(25, 100, 50, 100)
ctx.quadraticCurveTo(50, 120, 30, 125)
ctx.quadraticCurveTo(60, 120, 65, 100)
ctx.quadraticCurveTo(125, 100, 125, 62.5)
ctx.quadraticCurveTo(125, 25, 75, 25)
ctx.closePath()

此示例还演示了 fillText() API

ctx.fillStyle = "white"
ctx.font = "bold 17px sans-serif"
ctx.fillText("Qt Quick", 40, 70)

圆角椭圆

圆角椭圆 使用简单的 moveTo() 和 lineTo() 路径 API 来绘制平滑的圆角椭圆。

圆角矩形

圆角矩形 使用 lineTo() 和 arcTo() 路径 API 来绘制圆角矩形。

笑脸

笑脸使用多个路径来绘制和填充一个笑脸。

裁剪

裁剪使用裁剪 API 来裁剪一个给定的图像。

ctx.clip()
ctx.drawImage(canvas.imagefile, 0, 0)

老虎

老虎使用 SVG 路径 API 和一组 SVG 路径字符串来绘制老虎。

for (let i = 0; i < Tiger.tiger.length; i++) {
    if (Tiger.tiger[i].width !== undefined)
        ctx.lineWidth = Tiger.tiger[i].width

    if (Tiger.tiger[i].path !== undefined)
        ctx.path = Tiger.tiger[i].path

    if (Tiger.tiger[i].fill !== undefined) {
        ctx.fillStyle = Tiger.tiger[i].fill
        ctx.fill()
    }

    if (Tiger.tiger[i].stroke !== undefined) {
        ctx.strokeStyle = Tiger.tiger[i].stroke
        ctx.stroke()
    }
}

示例项目 @ code.qt.io