Qt Quick 示例 - 画布

这是 QML Canvas 示例集。

Canvas是与Canvas 类型有关的小型 QML 示例集。每个示例都是一个强调特定类型或功能的小型 QML 文件。

运行示例

要运行来自 Qt Creator，打开Welcome 模式并从Examples 中选择示例。更多信息，请参阅Qt Creator: Tutorial：构建并运行。

红心

红心使用贝塞尔曲线 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)

Squircle

Squircle使用一系列简单的 moveTo() 和 lineTo() 路径 API 绘制了一个光滑的松鼠。

圆角矩形

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

笑脸

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

剪辑

Clip使用 clip API 剪辑指定图像。

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

老虎

Tiger使用 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

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.