Comment convertir les coordonnées x, y en un angle?
Microsoft fournit un excellent générateur de dégradés SVG ainsi IE9 peut également avoir des dégradés "CSS3" (cliquez sur Personnaliser).
J'utilise actuellement leur logique pour mes Fireworks et Dreamweaver extensions pour convertir des dégradés en SVG, mais je ne sais comment le faire que pour les directions standard haut, bas, gauche et droite. Si vous entrez un angle, je ne ferai pas la conversion, car je ne sais pas comment convertir x1, x2, y1, y2 en degrés d'angle CSS3.
Le générateur de gradient fournit des valeurs telles que: x1 = "0%" y1 = "0%" x2 = "56.262833675564686%" y2 = "68.29999651227678%"
Je ne suis pas très doué en mathématiques ou en trigonométrie, alors quelqu'un pourrait-il m'aider? J'aimerais aussi utiliser les mêmes calculs dans un mix Sass pour faire la même chose, si possible.
Si vous obtenez deltaX et deltaY à partir de vos coordonnées, alors Math.atan2 renvoie l'arctangent du quotient de ses arguments. La valeur de retour est en radians.
var deltaX = x2 - x1;
var deltaY = y2 - y1;
var rad = Math.atan2(deltaY, deltaX); // In radians
Ensuite, vous pouvez le convertir en degrés aussi facilement que:
var deg = rad * (180 / Math.PI)
Modifier
Il y avait quelques bugs dans ma réponse initiale. Je crois que dans la réponse mise à jour, tous les problèmes sont résolus. Veuillez commenter ici si vous pensez qu’il ya un problème ici.
La réponse actuellement acceptée est incorrecte. Tout d'abord, Math.tan est totalement faux - je suppose que Mohsen voulait dire Math.atan et il ne s'agit que d'une faute de frappe.
Cependant, en tant que réponse à cette réponse, vous devez utiliser plutôt Math.atan2(y,x). La tangente inverse régulière ne renverra que les valeurs comprises entre -pi/2 et pi/2 (quadrants 1 et 4) car l'entrée est ambiguë - la tangente inverse ne permet pas de savoir si la valeur d'entrée appartient au quadrant 1 vs 3 ou 2 vs 4.
Math.atan2, d'autre part, peut utiliser les valeurs xy données pour déterminer le quadrant dans lequel vous vous trouvez et renvoyer l'angle approprié pour toutes les coordonnées des 4 quadrants. Ensuite, comme d’autres l’ont noté, vous pouvez simplement multiplier par (180/Math.pi) pour convertir des radians en degrés, si vous en avez besoin.
Au lieu d'utiliser la fonction Math.tan, vous devriez utiliser Math.atan2:
Voici un exemple d'utilisation:
deltaX = x2 - x1;
deltaY = y2 - y1;
deg = Math.atan2(deltaY, deltaX)*180.0/Math.PI;
et cela retournera un degré de <-180; 180>.
Si vous êtes dans un quadrant
P1 = (X0, Y0)
P2 = (X1, Y1)
a = (X0-X1)
b = (Y0-Y2)
deltaX=((a)**2)**0.5
deltaY=((b)**2)**0.5
rad=math.atan2(deltaY, deltaX)
deg = rad * (360 / math.pi)
print deg
le deg sera entre 0 ~ 180