Qt Quick Exemples - Canvas
Il s'agit d'une collection d'exemples QML Canvas.
Canvas est une collection de petits exemples QML relatifs au type Canvas. Chaque exemple est un petit fichier QML qui met l'accent sur un type ou une caractéristique particulière.
Exécution de l'exemple
Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.
Coeur rouge
Red heart utilise l'API des courbes de Bézier pour tracer et remplir un cœur rouge.
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()
Bulle de conversation
Talk bubble utilise l'API quadraticCurveTo() pour tracer et remplir une bulle de dialogue personnalisée :
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()
Cet exemple démontre également l'API fillText() :
ctx.fillStyle = "white" ctx.font = "bold 17px sans-serif" ctx.fillText("Qt Quick", 40, 70)
Cercle
Squircle utilise une collection d'API moveTo() et lineTo() simples pour dessiner un cercle lisse.
Rectangle arrondi
Lerectangle arrondi utilise une collection d'API de chemins lineTo() et arcTo() pour dessiner un rectangle arrondi.
Visage souriant
Smileface utilise plusieurs chemins pour dessiner et remplir un visage souriant.
Clip
Clip utilise l'API clip pour découper une image donnée.
ctx.clip() ctx.drawImage(canvas.imagefile, 0, 0)
Tigre
Tiger utilise l'API SVG path pour dessiner un tigre avec une collection de chaînes de chemin 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() } }
© 2026 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.
