2. Formes prédéfinies et interactions de base
Pour des formes courantes (rectangles arrondis ou non, ellipses), Canvas propose une
série de méthodes qui simplifie la création de chemin, voire le tracé ou le remplissage.
Par exemple, fillRect remplit un rectangle à l'écran, sans s'alourdir des fonctions
pour commencer ou arrêter un chemin : ces opérations sont automatiquement effectuées.
rect crée un chemin rectangulaire, sans le tracer ou le remplir (il faut donc faire
débuter le chemin avec beginPath et l'arrêter avec closePath).
Contrairement aux autres composants Qt Quick, Canvas ne prévoit pas grand-chose
pour traiter les événements reçus. Pour y arriver, il faut coupler cette zone d'affichage
avec MouseArea et décider de l'action à effectuer en fonction de la position du
curseur dans le composant Canvas. À ce niveau, autant que possible, pour chaque
zone qui doit réagir à la souris (comme un bouton), mieux vaut utiliser un duo de
composants Canvas-MouseArea, afin de faciliter le travail de traitement de l'événement
(et laisser le moteur d'exécution de Qt Quick calculer le composant qui doit recevoir
l'événement, d'une manière très efficace). Cependant, si la forme n'est pas
rectangulaire, il n'y a pas d'autre choix que de gérer les différents événements dans le
même composant (voir la Section 4, Détection de collision).
Pour implémenter MosaiQ, la solution la plus simple est probablement de stocker les
coordonnées de tous les rectangles à afficher dans un modèle de liste, puis d'afficher
ces rectangles à l'aide d'un répétiteur Repeater. Quand l'utilisateur clique sur un
rectangle, les quatre sous-rectangles sont ajoutés dans le modèle et celui qui a reçu le
clic est supprimé.
Note > Le code qui suit correspond à l'exemple mosaiq-canvas du dépôt Git .
mosaiq-rectangle en est une autre implémentation, équivalente, mais qui
n'utilise pas Canvas : elle est plus facile à comprendre, car elle ne fait pas appel à
de nouveaux concepts. L' organisation du code est également très similaire.
import QtQuick 2.5
import QtQuick.Window 2.0
Window {
id: window
function colour() {
return Qt.rgba(Math.random(), Math.random(), Math.random(), 1).toString(); }
436
Pour des formes courantes (rectangles arrondis ou non, ellipses), Canvas propose une
série de méthodes qui simplifie la création de chemin, voire le tracé ou le remplissage.
Par exemple, fillRect remplit un rectangle à l'écran, sans s'alourdir des fonctions
pour commencer ou arrêter un chemin : ces opérations sont automatiquement effectuées.
rect crée un chemin rectangulaire, sans le tracer ou le remplir (il faut donc faire
débuter le chemin avec beginPath et l'arrêter avec closePath).
Contrairement aux autres composants Qt Quick, Canvas ne prévoit pas grand-chose
pour traiter les événements reçus. Pour y arriver, il faut coupler cette zone d'affichage
avec MouseArea et décider de l'action à effectuer en fonction de la position du
curseur dans le composant Canvas. À ce niveau, autant que possible, pour chaque
zone qui doit réagir à la souris (comme un bouton), mieux vaut utiliser un duo de
composants Canvas-MouseArea, afin de faciliter le travail de traitement de l'événement
(et laisser le moteur d'exécution de Qt Quick calculer le composant qui doit recevoir
l'événement, d'une manière très efficace). Cependant, si la forme n'est pas
rectangulaire, il n'y a pas d'autre choix que de gérer les différents événements dans le
même composant (voir la Section 4, Détection de collision).
Pour implémenter MosaiQ, la solution la plus simple est probablement de stocker les
coordonnées de tous les rectangles à afficher dans un modèle de liste, puis d'afficher
ces rectangles à l'aide d'un répétiteur Repeater. Quand l'utilisateur clique sur un
rectangle, les quatre sous-rectangles sont ajoutés dans le modèle et celui qui a reçu le
clic est supprimé.
Note > Le code qui suit correspond à l'exemple mosaiq-canvas du dépôt Git .
mosaiq-rectangle en est une autre implémentation, équivalente, mais qui
n'utilise pas Canvas : elle est plus facile à comprendre, car elle ne fait pas appel à
de nouveaux concepts. L' organisation du code est également très similaire.
import QtQuick 2.5
import QtQuick.Window 2.0
Window {
id: window
function colour() {
return Qt.rgba(Math.random(), Math.random(), Math.random(), 1).toString(); }
436