Article original : How to lock an angle when drawing on canvas in JavaScript
Par Thang Minh Vu
Dans de nombreux outils de dessin (Adobe Photoshop, Sketch, et ainsi de suite), si nous maintenons le bouton SHIFT enfoncé lors du dessin d'une ligne, nous pouvons créer des lignes parfaitement droites horizontalement ou verticalement.
Récemment, j'ai essayé d'implémenter cette fonctionnalité en canvas avec JavaScript. Le processus est vraiment intéressant. Je voudrais partager les progrès de la manière dont je l'ai abordé.
Démonstration : Pour mieux comprendre l'idée, vous pouvez consulter une version de démonstration sur la page de démonstration.
Exigences
Entrée
- Un point de base (B)
- Position actuelle de la souris (M)
Sortie
- Projection de la position actuelle de la souris sur l'axe x ou y (P)
Pour plus de commodité, dans tous les graphiques, nous marquerons le point de base par un cercle rouge et le point actuel de la souris par un cercle vert.
Solution simple
Lorsque j'aborde le problème, il est intuitif de voir que nous pouvons calculer la distance entre la position actuelle de la souris et la ligne horizontale et la ligne verticale. Si la position de la souris est plus proche de la ligne horizontale que de la ligne verticale, nous prendrons la projection sur la ligne horizontale, et vice versa.
Le calcul est assez simple — voici le code JavaScript :
Problème étendu
Et si nous voulons projeter sur la ligne bissectrice entre la ligne horizontale et la ligne verticale (similaire à Sketch) ? Cela signifie que les utilisateurs peuvent projeter la position de la souris sur la ligne horizontale, la ligne verticale, la ligne à 45 degrés ou la ligne à 135 degrés.
L'approche est similaire. Cette fois, nous devons calculer la distance entre la position de la souris et 4 lignes : la ligne horizontale, la ligne verticale et 2 lignes bissectrices (ligne à 45 degrés et ligne à 135 degrés). Mais le calcul est plus complexe.
Nous pouvons toujours le diviser en 2 étapes :
- Déterminer quelle ligne est la plus proche de la position de la souris
- Calculer la projection de la position de la souris sur la ligne la plus proche
Étape 1 : Déterminer quelle ligne est la plus proche de la position de la souris
Tout d'abord, nous devons déterminer la formulation de la ligne des 4 lignes ci-dessus. Parce que nous connaissons déjà le point de base (x0, y0) et l'angle de la ligne, il est facile de déterminer la formulation de chaque ligne.
Exemple : Pour calculer la formule de la bissectrice à 45 degrés, nous savons déjà que la ligne passera par le point de base (x0, y0) et (x0 + 1, y0 + 1). En utilisant la méthode Find-the-Equation-of-a-Line, nous pouvons déterminer la formule de la ligne.
Enfin, nous aurons les formules des 4 lignes :
Pour calculer la distance entre la position de base de la souris et chaque ligne, nous pouvons utiliser une formule mathématique populaire :
Étape 2 : Calculer la projection orthogonale de la position de la souris sur la ligne la plus proche
Maintenant, le problème consiste à calculer la projection orthogonale de la position de la souris (M) sur la ligne la plus proche avec la formule : ax + by + c = 0 (L)
Il existe plusieurs façons de résoudre ce problème. J'ai choisi une méthode simple : d'abord, calculer la formule de la ligne qui contient la position de la souris M et qui est perpendiculaire à la ligne L, appelée L'. Ensuite, résoudre le système d'équations pour obtenir le point d'intersection entre la ligne L et L', qui est le point de projection que nous cherchons.
Après quelques calculs, j'ai déterminé la formule de L', qui passe par M (x0, y0) et qui est perpendiculaire à L (ax + by + c = 0) :
Maintenant, pour trouver l'intersection, nous devons résoudre le système d'équations :
En utilisant la règle de Cramer et le déterminant de la matrice, nous pouvons résoudre cette équation facilement :
Limite
Il existe une situation où nous voulons limiter la frontière de la projection.
Exemple :
Dans ce cas, nous voulons limiter la projection dans la zone rectangulaire blanche, mais en utilisant la méthode discutée, le point de projection peut être en dehors de la zone de limite.
Dans cette situation, nous pouvons simplement obtenir le point d'intersection de la ligne L' avec la limite (appelé P').
Code source complet
Vous pouvez consulter la démonstration et le code source sur Github.
Bon codage !