Qt Quick 示例 - 画布#
这是一个 QML 画布示例的集合。
画布 是一个 QML 示例集合，涉及 画布 类型。每个示例都是一个小的 QML 文件，强调某个特定类型或功能。
运行示例#
要从 Qt Creator 运行示例，请打开欢迎模式并从示例中选择。有关更多信息，请访问构建和运行示例。
红色心形#
红色心形 使用 Bézier 曲线 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() } }