3. Dessiner à la souris
Canvas peut aussi servir à des cas où les appels sont nettement plus fréquents, par
exemple dans une application de dessin : l'utilisateur clique et crée ainsi un point à
afficher. Quand il déplace la souris, autant de points sont ainsi créés.
C'est exactement le prochain exemple : en fonction des boutons de la souris enfoncés,
les points dessinés changent de couleur. Ils seront rouges à l'appui du bouton gauche,
verts avec le droit et bleu quand les deux sont enfoncés.
Canvas {
anchors.fill: parent
onPaint: {
if (mouseArea.pressed) { var ctx = getContext('2d'); if
((mouseArea.pressedButtons & Qt.LeftButton) && ! (mouseArea.pressedButtons &
Qt.RightButton)) { ctx.fillStyle = "red"; } else if (! (mouseArea.pressedButtons &
Qt.LeftButton) && (mouseArea.pressedButtons & Qt.RightButton)) { ctx.fillStyle =
"green"; } else { ctx.fillStyle = "blue"; } ctx.fillRect(mouseArea.mouseX - 2,
mouseArea.mouseY - 2, 5, 5); } } MouseArea { id: mouseArea anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton onPressed: parent.requestPaint()
onPositionChanged: parent.requestPaint() } }
Cette fonction est appelée chaque fois que l'utilisateur clique ou que Qt envoie un
événement de déplacement de la souris (événements pressed et
positionChanged) grâce à ; le code appelé implémente le comportement
souhaité, c'est-à-dire, ici, ajouter le nouveau point à l'écran.
Un détail d'implémentation : au lancement de l'application, le gestionnaire de signal
onPaint est appelé. À ce moment, personne n'appuie sur la zone sensible, le point
correspondant aux coordonnées par défaut est donc dessiné. Cette condition sert à
éviter cet effet de bord et à ne laisser l'affichage se produire que lors d'un appui sur
la souris.
Un carré de cinq pixels de côté est dessiné au niveau du point actuellement visé par
la souris ; les coordonnées de son centre sont mémorisées dans les propriétés
mouseX et mouseY de la zone sensible mouseArea.
439