如何将x，y坐标转换成一个角度？ [英] How to convert x,y coordinates to an angle?

问题描述

Microsoft提供了出色的 SVG渐变效果器，因此IE9也可以拥有CSS3

我目前使用他们的逻辑用于我的 Fireworks 和 Dreamweaver 扩展将渐变转换为SVG，但我只知道如何做到标准的顶部，底部，左，右方向。如果你输入一个角度，我不做转换，因为我不知道如何将x1，x2，y1，y2转换为CSS3角度。

梯度生成器提供如下值：x1 =0％y1 =0％x2 =56.262833675564686％y2 =68.29999651227678％

< m不是数学或三角学，所以有人可以帮助我吗？如果可能，我也想在Sass mixin中使用相同的数学来做类似的事情。

解决方案

从您的坐标中获取 deltaX 和 deltaY ，然后 Math.atan2 返回其参数商的反正切。返回值以弧度表示。

  var deltaX = x2  -  x1; 
 var deltaY = y2  -  y1; 
 var rad = Math.atan2（deltaY，deltaX）; //以弧度表示
  

然后您可以将它转换为简单的度数：

  var deg = rad *（180 / Math.PI）
  

>

编辑

我的初步答案中有一些错误。我相信更新的答案所有错误都得到解决。如果您认为这里有问题，请在此评论。

Microsoft provide an excellent SVG gradient maker so IE9 can also have "CSS3" gradients (click Custom).

I currently utilise their logic for my Fireworks and Dreamweaver extensions to convert gradients to SVG, but I only know how to do it for standard top, bottom, left, right directions. If you enter an angle, I don't do the conversion, because I'm not sure how I would convert x1, x2, y1, y2 to CSS3 angle degrees.

The gradient generator provides values like this: x1="0%" y1="0%" x2="56.262833675564686%" y2="68.29999651227678%"

I'm not great with mathematics or trigonometry, so could somebody help me out? I'd also like to use the same math in a Sass mixin to do a similar thing, if possible.

解决方案

If you get deltaX and deltaY from your coordinates then Math.atan2 returns the arctangent of the quotient of its arguments. The return value is in radians.

var deltaX = x2 - x1;
var deltaY = y2 - y1;
var rad = Math.atan2(deltaY, deltaX); // In radians

Then you can convert it to degrees as easy as:

var deg = rad * (180 / Math.PI)

Edit

There was some bugs in my initial answer. I believe in the updated answer all bugs are addressed. Please comment here if you think there is a problem here.

这篇关于如何将x，y坐标转换成一个角度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！