从方位获取像素位置

Question

我需要根据方位角和半径在坐标系上定位一个点。

使用以下代码，我可以将一个点定位在距中心正确距离的位置，但这仅适用于水平方向。

我需要的是基于方位和半径的点的顶部和左侧位置

setTimeout(function() {
    var km2show = 100;
    var testDistance = 50;
    var width = $('#radar').width();        // Width & height of radar
    var center = width/2;                               // Radar center
    var px2km = center/km2show;                 // Pixels per km
    var radius = radius2coor((px2km*testDistance),center);
    var bearing = 45;
    // Set height of radar based on the width
    $('#radar').height(width);
    // Set dot in center of radar
    $('#centerDot').css({top: center, left: center});

    $('#container').append("<div style='position:absolute;top:0px;left:"+radius+"px;color:white;'>*</div>");
},100);

function radius2coor(radius,center) {
    var res = radius-center;
    return res;
}  

请看 jsFiddle

那么我将如何获取 bot 点的顶部和左侧位置？

最终结果应将点定位在方位角为 45 度的红色标记处：

Answer 1

您遇到的主要问题是角度不是弧度，所以我们首先需要将 45 度转换为 pi/4。

另外，当从常规角坐标到 x,y 坐标时，半径乘以角度的正弦得到 y 坐标，半径乘以角度的余弦得到 x 坐标。想想单位圆就明白了。

var bearing = parseInt(prompt("enter angle in degrees", "0"));

if(!isNaN(bearing)){
setTimeout(function() {
	var km2show = 100;
    var testDistance = 50;
	var width = $('#radar').width();		// Width & height of radar
	var center = width/2;								// Radar center
	var px2km = center/km2show;					// Pixels per k
  
    //not sure what this is doing so I set a random radius 
    //(called it distanceFromCenter). If you need this to be 
    //the distance between two cartesian points then you can 
    //just implement the distance formula.
    //var radius = radius2coor((px2km*testDistance),center);
  
    var radius = 100;
    var radianBearing = (bearing/180)*Math.PI
	// Set height of radar based on the width
	$('#radar').height(width);
	// Set dot in center of radar
	$('#centerDot').css({top: center, left: center});
  
  //the main issue you were encountering was that the angle wasn't in radians so I converted it.
  positionDot(radius, radianBearing);
},100);
}
function positionDot(distanceFromCenter, bearing, width)
{

  //when going from regular angular coordinates to x,y coordinates you multiply the radius by sine of the angle to find y coordinate and you multiply the radius by the cosine of the angle to get the x coordinate.
	$('#container').append("<div style='position:absolute;top:"+(-distanceFromCenter*Math.sin(bearing)).toString()+"px;left:"+distanceFromCenter*Math.cos(bearing)+"px;color:white;'>*</div>");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='radar' style='width:100%;max-width:400px;height:400px;border:1px black solid;border-radius:400px;background-color:#3c3c3c;position:relative;'>

	<div id='centerDot' style='position:absolute;color:white;'>
	 <div style='position:relative;' id='container'></div>
	 <b>*</b>
	</div>
</div>

Answer 2

要获得这两个坐标，您需要中心、半径和方位的坐标。

请注意，三角函数通常使用以弧度为单位的参数，而不是度数（不了解 javascript 数学库）

P.X = Center.X + Radius * Math.Cos(bearing)
P.Y = Center.Y + Radius * Math.Sin(bearing)

Answer 3

您可以通过以下方式获得它： x = 中心 + 半径 * cos（方位角） y = 中心 + 半径 * sin(方位)

正如 MBo 所说，您必须将方位转换为弧度

rad = 度 * PI / 180

https://upload.wikimedia.org/wikipedia/sr/8/85/Trig-funkcije1.gif