4. Éditer - onclick()

La souris est l’outil principal pour interagir dans un programme graphique. Dans un éditeur graphique, le clic de souris sert à :

• faire des choix dans un menu,

• ajouter des points,

• dessiner des lignes,

• créer des rectangles et cercles.

4.1. Hello mouse

Ce programme interactif dessine une ligne qui commence au centre et va vers l’endroit du clic de la souris.

4.2. Astérisque

Ce programme interactif dessine un astérisque avec des lignes qui commencent toutes au centre et vont vers le clic de la souris.

4.3. Palette de couleur

Dans un programme de dessin, la couleur actuelle peut souvent être choisie en cliquant dans une palette.

Le tuple couleurs contient une liste de couleurs. Il est est utilisé pour

• dessiner une palette (menu) coloriée

• déterminer l’index de la couleur lors de’un clic.

Exercice 1

Cliquez sur la palette de couleurs pour choisir une couleur.
Cliquez dans le canevas, pour ajouter un point dans cette couleur.

4.4. Palette de taille

Dans un programme de dessin, la couleur actuelle peut souvent être choisie en cliquant dans une palette.

Exercice 2

Cliquez sur la palette de taille pour choisir une taille.
Cliquez dans le canevas pour ajouter un point de cette taille.

4.5. Palette d’épaisseur

Dans un programme de dessin, la taille actuelle peut souvent être choisie en cliquant dans une palette.

Exercice 3

Cliquez sur la palette d’épaisseur pour choisir une épaisseur.
Cliquez dans le canevas pour ajouter une ligne de cette épaisseur.

4.6. Dessiner une ligne

Dans un programme de dessin, l’élément de base est une ligne. Deux clics définissent une ligne. Nous allons utiliser une variable booléenne start pour mémoriser si un clic est le début ou la fin. Si start est vrai, nous levons le stylo pour juste aller vers le premier point.

Nous utilisons l’opérateur logique not pour inverser l’état logique de la variable start

4.7. Dessiner un rectangle

Le rectangle est un élément graphique de base.

4.8. Dessiner une ellipse

Ce programme interactif dessine une ellipse avec deux clics de souris. Le premier clic désigne le centre, le deuxième clic le sommet du rectangle entourant cette ellipse.

L’ellipse est constituée de 36 points, dont les coordonnées (x, y) sont calculées à l’aide des fonctions trigonométriques sin() et cos() du module math.

4.9. Effacer un point

Jusqu’à maintenant, nous avons seulement ajouté des points et des segments au dessin. Aucune position n’a été retenue en mémoire. Pour pouvoir éditer des formes dessinées, nous devons alors garder les coordonnées en mémoire.

La liste points contient les coordonnées de la ligne polygonale. A chaque clic nous devons :

• vérifier si nous avons cliqué sur un point existant,

• ajouter le nouveau point dans la liste des points, le cas échéant.

Quand on clique sur un point existant, nous devons l’enlever de la liste et redessiner la ligne polygonale.

4.10. Marquer un point

Jusqu’à maintenant, nous avons seulement dessiné. Aucune position n’a été retenue en mémoire. Pour pouvoir éditer des formes dessinées, nous devons alors garder les coordonnées en mémoire.

La liste points contient les coordonnées de la ligne polygonale. Si nous cliquons sur un point existant, nous le sauvegardons avec la variable q.

4.11. Enlever le dernier point

Nous utilisons une liste points pour stocker les points d’une ligne polygonale. La touche Back permet d’enlever le dernier point et de redessiner la ligne.

4.12. Afficher un polygone

Nous allons maintenant créer un éditeur de polygone. La première version permet de créer avec des clics de souris et d’afficher ce polygone, avec 6 options d’affichage:

• d afficher un point (dot)

• l afficher la ligne

• f afficher un remplissage (fill)

• i afficher l’indice du point

• p afficher la position du point

• c fermer le polygone (close)

Ces valeurs booléennes sont stockées dans un dictionnaire settings.

settings = {}
settings['show_dots'] = True

La fonction toggle(key) permet de basculer True et False pour une clé et ensuite redessiner le polygone.

def toggle(key):
    settings[key] = not settings[key]
    draw()

La fonction draw() dessine tout et utilise les valeurs booléennes pour dessiner ou non les options choisies. Voici par exemple la partie qui décide s’il faut dessiner les points (dots) ou ajouter l’indice du point.

    if settings['show_dots']:
        dot()
    if settings['show_index']:
        write(i)

Voici le code en entier. Vous pouvez également le télécharger et exécuter avec un éditeur externe.

4.13. Éditer les points

Dans la suite nous ajoutons la possibilité pour éditer les points du polygone. Un click de souris sélectionner un point du polygone, il devient rouge.

Une fois sélectionné on peut

• déplacer ce point

• marquer un autre point

Trois touches ajoutent des fonctions supplémentaires

• sélectionner un point

• Tab pour déplacer le point marqué

• BackSpace pour effacer le point marqué

• Escape pour désélectionner le point marqué

Dans le code ci-dessous, nous n’affichons plus le code précédent. Mais il est toujours présent et exécuté. Si vous téléchargez le code, vous aurez le code complet.

4.14. Éditeur complet

Téléchargez le code source polygon_editor.py

Déplacement (Move)

La touche Space permets de sélectionner le polygone entier. Il est marqué par une boite de sélection rouge, avec 9 points de références. Avec un clic de souris, on peut choisir un des 9 points de référence.

Avec un clic de souris, on peut alors déplacer le polygone partout dans le canevas.

La fonction move() permet de déplacer chaque point d’un vecteur de déplacement dx, dy.

def move(points, dx, dy):
    for i, p in enumerate(points):
        points[i] = p[0] + dx, p[1] + dy

Échelle (Scale)

Dans le mode transformation, marqué par la boite rouge, on peut alors déformer le polygone à l’aide des touches de direction.

• Up/Down effectue une déformation verticale

• Left/Right effectue une déformation horizontale

La fonction scale() permets de changer chaque point d’un facteur d’échelle dx, dy, par rapport à un point de référence p0.

def scale(points, p0, dx, dy):
    x0, y0 = p0
    for i, (x, y) in enumerate(points):
        points[i] = x0 + (x - x0) * dx, y0 + (y - y0) * dy
    draw()

Cisaillement (Shear)

Dans le mode transformation, marqué par la boite rouge, on peut alors cisailler le polygone à l’aide des touches de direction.

• Up/Down effectue un cisaillement vertical

• Left/Right effectue un cisaillement horizontal

La fonction shear() permet de déformer par un facteur dx, dy, par rapport à un point de référence p0.

def shear(points, p0, dx, dy):
    for i, p in enumerate(points):
        x = p[0] - p0[0]
        y = p[1] - p0[1]
        points[i] = p0[0] + x + dx*y, p0[1] + y + dy * x

Rotation

Dans le mode transformation, marqué par la boite rouge, on peut alors faire tourner et changer l’échelle du polygone à l’aide des touches de direction.

• Left/Right effectue une rotation autour du point de référence

• Up/Down effectue un changement d’échelle (zoom)

La fonction rotate() permet de tourner par un angle angle, par rapport à un point de référence p0. Nous avons besoins des fonctions trigonométriques sin() et cos().

def rotate(points, p0, angle):
    x0, y0 = p0
    for i, (x, y) in enumerate(points):
        x1 = x0 + cos(angle) * (x - x0) - sin(angle) * (y - y0)
        y1 = y0 + sin(angle) * (x - x0) + cos(angle) * (y - y0)
        points[i] = x1, y1

Créez d’abord un polygone avec des clics de souris. Ensuite utilisez les touches de direction pour changer l’échelle et tourner le polygone.