Qt Quick Exemples - Canvas

Canvas est une collection de petits exemples QML liés au type « Canvas ». Chaque exemple est un petit fichier QML mettant en avant un type ou une fonctionnalité particulière.

Exécution de l'exemple

Vous pouvez exécuter l'exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Cœur rouge

«Red Heart » utilise l’API des courbes de Bézier pour tracer le contour 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 dialogue

L'exemple «Bulle de dialogue » utilise l'API `quadraticCurveTo()` pour tracer le contour 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 illustre également l'API fillText() :

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

Squircle

« Squircle » utilise un ensemble d’API de tracé simples (moveTo() et lineTo()) pour dessiner un « squircle » aux contours lisses.

Rectangle arrondi

Le rectangle arrondi utilise un ensemble d'API de tracé lineTo() et arcTo() pour dessiner un rectangle arrondi.

Visage souriant

Le visage souriant utilise plusieurs tracés pour dessiner et remplir un visage souriant.

Découpe

L'API« Clip » utilise l'API « clip » pour recadrer une image donnée.

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

Tigre

«Tiger » utilise l'API des chemins SVG pour dessiner un tigre à l'aide d'un ensemble de chaînes de chemins 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()
    }
}

Exemple de projet sur code.qt.io