javascript - 从方位获取像素位置

Question

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

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

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

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

那么我该如何获取机器人点的顶部和左侧位置？

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

Answer 1

您遇到的主要问题是 Angular 不是弧度，所以我们要做的第一件事是将 45 度转换为 pi/4。

此外，当从常规 Angular 坐标转换为 x,y 坐标时，您可以将半径乘以 Angular 正弦来找到 y 坐标，然后将半径乘以 Angular 余弦来获得 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>