Question

Microsoft提供了出色的SVG gradient maker，因此IE9也可以拥有“CSS3”渐变（单击“自定义”）。

我目前利用他们的Fireworks和Dreamweaver扩展程序的逻辑将渐变转换为SVG，但我只知道如何为标准的顶部，底部，左，右方向执行此操作。如果输入一个角度，我不进行转换，因为我不确定如何将x1，x2，y1，y2转换为CSS3角度。

渐变生成器提供如下值：x1 =“0％”y1 =“0％”x2 =“56.262833675564686％”y2 =“68.29999651227678％”

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

Answer 1

如果从坐标中得到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

修改

我最初的答案中有一些错误。我相信更新的答案会解决所有错误。如果您认为此处存在问题，请在此处发表评论。

Answer 2

目前接受的答案不正确。首先，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)将弧度转换为度数。

Answer 3

您应该使用Math.atan2：

而不是使用Math.tan函数

以下是使用示例：

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

，这将从＆lt; -180; 180＆gt;返回一个学位。

Answer 4

如果您在象限中

P1 =（X0，Y0）

P2 =（X1，Y1）

α=（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之间

Answer 5

＆＃13;

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;
			}

＆＃13;

			.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;
			}

＆＃13;

<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>

＆＃13;

Answer 6

此函数采用2个元素并返回元素中间的度数。

例如，我在世界地图上使用它，使平面图像在城市方向旋转。

function degFromTwoElements(el1,el2){
    var x1,x2,y1,y2,cx1,xy1,cx2,cy2,deltaX,deltaY,dx,dy,rad,deg,shortest,number;
    x1 = el1.position().left;
    y1 = el1.position().top;
    x2 = el2.position().left;
    y2 = el2.position().top;
    cx1 = x1 - (el1.width() / 2);
    cy1 = y1 - (el1.height() / 2);
    cx2 = x2 - (el2.width() / 2);
    cy2 = y2 - (el2.height() / 2);

    deltaX = cx2 - cx1;
    deltaY = cy2 - cy1;
    y1 = Math.sqrt((Math.abs(deltaY)*Math.abs(deltaY))+(Math.abs(deltaX)*(Math.abs(deltaX))));
    x1 = 0;
    dy = deltaY-y1;
    dx = deltaX-x1;
    rad = Math.atan2(dy, dx);
    deg = rad * (360 / Math.PI);

    shortest;
    number = Math.abs(deg);
    if ((360 - number ) < number){
        shortest = 360 - number;
        console.log('shorter degree: ' + shortest);
        return shortest;
    } 
    else console.log('Angle is: ' + deg);
    return deg;

}

如何将x，y坐标转换为角度？

6 个答案:

修改