Ci-dessous un exemple simple et clair de l'utilisation du canvas pour l'affichage, la sélection, le déplacement et le redimensionnement d'objets graphiques de base:

• un clic sur l'objet le sélectionne, un clic en dehors de l'objet déselectionne l'éventuel objet sélectionné
• un déplacement de souris sur l'objet sélectionné déplace l'objet
• un déplacement de souris à partir des poignées redimensionne l'objet
• un double clic crée un nouvel objet

Quelques exemples de notions importantes générales mises en pratique dans ce code, à regarder de près pour ceux qui ne sont pas encore familiers avec:

• gestion d'évènements et callbacks
• portée des variables et fermeture

Le code a été originalement écrit par Simon Sarris et le tutorial est disponible ici. Le code arrangé est mis en ligne par Andrew Clark et disponible sur github.

Exercice

1. Ajouter un bouton "Clear" permettant d'effacer tous les objets du canvas et écrire le code associé.
2. Ajouter des boutons "Undo/redo" permettant de défaire et refaire la dernière action faite/défaite.
3. Modification du plan d'affichage: faire en sorte que lorsqu'on clique sur +/- sur un objet sélectionné cela l'avance vers le premier plan (+) ou le recule vers l'arrière plan (-). NB: cette opération est surtout utile lorsque des objets se superposent sans transparence au moins partiellement, et il est alors nécéssaire d'avoir les relations entre les objets qui se superposent mais ici on vous demande simplement une version préliminaire de faire juste avancer ou reculer dans la liste d'affichage l'objet sélectionné.