1. Dessin par pinceau/brosse
Tout l'affichage se fait à l'intérieur d'un composant Canvas, une zone rectangulaire où
l'on peut dessiner. Cette zone peut être configurée comme tout composant Qt Quick,
avec une position et une dimension. Le gestionnaire de signal onPaint est exécuté
chaque fois que le contenu de la zone est rafraîchi. Voici donc le squelette minimal pour
commencer à dessiner :
Canvas {
width: 400
height: 400
onPaint: {
ctx = getContext("2d");
}
}
La fonction getContext("2d") sert à récupérer une instance de Context2D, un objet
de contexte sur lequel toutes les opérations de dessin seront effectuées (l'équivalent de
CanvasRenderingContext2D côté HTML5). Là où Canvas est le composant Qt Quick
qui correspond à la zone de dessin, Context2D implémente les opérations sur cette
zone.
Une première manière d'utiliser Canvas s'assimile au langage Logo, utilisé pour
présenter la programmation aux enfants : l'objectif est de déplacer une tortue-crayon
pour réaliser un dessin. Avec Canvas, on commence par définir le pinceau qu'on
souhaite utiliser, puis on se déplace dans une direction donnée autant de fois que
nécessaire pour effectuer la forme voulue. Ensuite, en fermant le circuit, on peut
remplir la forme correspondante avec une couleur ou un dégradé.
var ctx = getContext("2d")
ctx.lineWidth = 10 ctx.strokeStyle = "darkgreen" ctx.fillStyle = "darkseagreen"
ctx.beginPath() ctx.moveTo(50, 50) ctx.lineTo(350, 50) ctx.lineTo(350, 350)
ctx.lineTo(50, 350) ctx.closePath() ctx.fill() ctx.stroke()
Comme dans tout code Canvas, il faut commencer par récupérer un contexte pour
l'affichage. N'oubliez pas le mot clé var, nécessaire pour définir une variable
locale.
431