Microsoft は優れたSVG グラデーション メーカーを提供しているため、IE9 では "CSS3" グラデーションも使用できます ([カスタム] をクリックします)。
私は現在、FireworksとDreamweaverの拡張機能でグラデーションを SVG に変換するためにそれらのロジックを利用していますが、標準的な上、下、左、右の方向に対してのみそれを行う方法を知っています。角度を入力した場合、x1、x2、y1、y2 を CSS3 の角度に変換する方法がわからないため、変換は行いません。
勾配ジェネレーターは次のような値を提供します: x1="0%" y1="0%" x2="56.262833675564686%" y2="68.29999651227678%"
私は数学や三角法が苦手なので、誰か助けてくれませんか? 可能であれば、Sass mixin で同じ計算を使用して、同様のことを行いたいと考えています。
座標からを取得するdeltaXと、その引数の商のアークタンジェントが返されます。戻り値はラジアンです。deltaYMath.atan2
var deltaX = x2 - x1;
var deltaY = y2 - y1;
var rad = Math.atan2(deltaY, deltaX); // In radians
次に、次のように簡単に度に変換できます。
var deg = rad * (180 / Math.PI)
私の最初の回答にはいくつかのバグがありました。すべてのバグが解決された最新の回答を信じています。ここに問題があると思われる場合は、ここにコメントしてください。
現在受け入れられている回答は正しくありません。まず第一に、これ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)ラジアンを度に変換できます。
象限にいる場合
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
度は 0 ~ 180 の間になります
var x,x1,x2,y,y1,y2;
var cells = 'cell0';
var h,w;
var cx,cy;
var dx,dy;
var derajat;
var deg;
var ang;
var light;
var control;
function mouse_watch(event){
x = event.clientX;
y = event.clientY;
cell_data(cells);
koordinat(x2,y2);
busur(derajat);
}
function koordinat(x2,y2){
x2 = x-cx;
y2 = y-cy;
yk = y2;
xk = x2;
}
function busur(derajat){
y1 = Math.sqrt((Math.abs(yk)*Math.abs(yk))+(Math.abs(xk)*(Math.abs(xk))));
x1 = 0;
dy = yk-y1;
dx = xk-x1;
rad = Math.atan2(dy, dx);
derajat = rad * (360 / Math.PI);
cell = document.getElementById(cells);
ang = cell.getElementsByClassName('angle0')[0];
ang.style.transform = 'rotate('+derajat+'deg)';
light = ang.getElementsByClassName('points')[0];
light.style.height = y1+'px';
}
function cell_data(cells){
cell = document.getElementById(cells);
h = Number(cell.style.height.replace('px',''));
w = Number(cell.style.width.replace('px',''));
cy = Number(cell.style.top.replace('px',''))+h/2;
cx = Number(cell.style.left.replace('px',''))+w/2;
} .preview_engine{
position: absolute;
top: 0;
left: 0;
padding: 10px;
background-color: #2E8AE6;
color: white;
}
body{
cursor: default;
width: 100%;
height: 100%;
font-family: Arial;
font-size: 12px;
}
.fieldwork{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.cell{
position: relative;
transition : width 2s, height 2s, top 2s, left 2s;
background-color: red;
}
.angle0{
width: 200px;
height: 200px;
position: absolute;
top: -75px;
left: -75px;
background-color: green;
border-radius: 50%;
opacity: 0.5;
transition : width 2s, height 2s, top 2s, left 2s;
}
.points{
width: 10px;
height: 10px;
position: absolute;
left: 95px;
top: 95px;
background-color: red;
border-radius: 1em;
opacity: none;
}<div class="fieldwork" onmousemove="mouse_watch(event)">
<div class='cell' id="cell0" style="width:50px;height:50px;top:200px;left:400px;">
<div class="angle0">
<div class="points"></div>
</div>
</div>
</div>