web-dev-qa-db-ja.com

X、Y座標を角度に変換する方法は？

マイクロソフトは優れた SVGグラデーションメーカー を提供しているため、IE9は "CSS3"グラデーションも持つことができます（[カスタム]をクリックします）。

現在、私は Fireworks および Dreamweaver 拡張機能にそれらのロジックを利用してグラデーションをSVGに変換しますが、標準の上下左右の方向でそれを行う方法しか知りません。角度を入力した場合、x1、x2、y1、y2をCSS3角度に変換する方法がわからないため、変換は行いません。

勾配ジェネレーターは、次のような値を提供します。x1 = "0％" y1 = "0％" x2 = "56.262833675564686％" y2 = "68.29999651227678％"

私は数学や三角法が得意ではないので、誰か助けてくれませんか？また、可能であれば、Sassミックスインで同じ数学を使用して同様のことを行いたいと思います。

javascriptcss3svggradienttrigonometry
34
Matt Stow

座標からdeltaXとdeltaYを取得する場合、 Math.atan2 は、引数の商のアークタンジェントを返します。戻り値はラジアン単位です。

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

次に、次のように簡単に度に変換できます。

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

enter image description here

編集

最初の回答にはいくつかのバグがありました。更新された回答では、すべてのバグが対処されていると思います。ここに問題があると思われる場合は、ここにコメントしてください。

66
Mohsen

現在受け入れられている答えは間違っています。まず第一に、_Math.tan_はまったく間違っています-Mohsenは_Math.atan_を意味していたと思いますが、これは単なる誤植です。

ただし、その回答状態に対する他の応答として、代わりにMath.atan2(y,x)を実際に使用する必要があります。通常の逆タンジェントは、入力があいまいであるため、-pi/2とpi/2（象限1と4）の間の値のみを返します-逆タンジェントには、入力値が象限1と3のどちらに属するかを知る方法がありません。 2対4。

一方、_Math.atan2_は、指定されたxy値を使用して、現在の象限を把握し、4つの象限すべての座標に適切な角度を返します。その後、他の人が指摘したように、必要であれば、ラジアンを度に変換するために_(180/Math.pi)_を掛けることができます。

18
Matt

Math.tan関数を使用する代わりに、Math.atan2を使用する必要があります。

使用例は次のとおりです。

deltaX = x2 - x1;
deltaY = y2 - y1;
deg = Math.atan2(deltaY, deltaX)*180.0/Math.PI;

そして、これは<-180; 180>から次数を返します。

3
MNie

象限にいる場合

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

degは0から180の間です

0
楊宇恩