从轴承获取像素位置

Question

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

使用以下代码，我可以将点放在距离中心正确的距离处，但这只能水平工作。

我需要的是top＆amp; amp;基于轴承和轴的点的左侧位置半径

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

那么我将如何获得机器人顶部和左侧位置的位置？

最终结果应将点定位在具有45度轴承的红色标记处：

Answer 1

你可以得到它： x =中心+半径* cos（方位） y =中心+半径* sin（方位）

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

rad = deg * PI / 180

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

Answer 2

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

请注意，三角函数通常使用弧度参数，而不是度数（不知道javascript数学库）

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

Answer 3

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

此外，当从常规角坐标转到x，y坐标时，您将半径乘以角度的正弦以找到y坐标，并将半径乘以角度的余弦以获得x坐标。只要想想单位圈，它就会有意义。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;