Repeater { model: ListModel { id: mod } delegate: Item { x: rx; y: ry width:
rsize; height: rsize Canvas { width: parent.width; height: parent.height onPaint: { var
ctx = getContext("2d"); ctx.fillStyle = rcolor; ctx.fillRect(0, 0, width, height); } }
MouseArea { anchors.fill: parent onClicked: { fragment(rx, ry, rsize);
mod.remove(index); } } } } Component.onCompleted: { fragment(0, 0,
window.width); } function fragment(_x, _y, _size) { var half = _size / 2;
mod.append({ "rx": _x, "ry": _y, "rsize": half, "rcolor": colour() }); mod.append({
"rx": _x + half, "ry": _y, "rsize": half, "rcolor": colour() }); mod.append({ "rx": _x,
"ry": _y + half, "rsize": half, "rcolor": colour() }); mod.append({ "rx": _x + half, "ry":
_y + half, "rsize": half, "rcolor": colour() }); } }
Les nouveaux rectangles auront une couleur aléatoire, décidée par cette fonction.
Les rectangles sont générés dynamiquement par le composant Repeater…
… selon les entrées du modèle mod.
Chaque rectangle de MosaiQ est encadré dans un composant Item, car il faut
contenir au même endroit une zone de dessin Canvas et une zone sensible aux clics
MouseArea.
Sa taille est donnée par le contenu du modèle (les rôles rx et ry pour la position,
rsize pour la taille du côté).
Canvas gère l'affichage d'un seul rectangle, dans une zone très limitée. La taille est
reprise de celle de l'Item parent.
La fonction fillRect remplit avec la couleur sélectionnée (ctx.fillStyle) un
rectangle passé en argument : le coin en haut à gauche (0, 0), puis la dimension en
largeur et en hauteur. La coordonnée (0, 0) correspond au coin en haut à gauche du
composant Canvas courant : le rectangle dessiné sera toujours au bon endroit, étant
donné que son parent (Item) est positionné de manière absolue au bon endroit dans
la scène.
Lors d'un clic, il faut retirer un rectangle du modèle et en ajouter quatre nouveaux,
437