2013-08-16 2 views
1

Итак, на моем холсте у меня большой эллипс, и когда пользователь нажимает на холст, маленький маленький эллипс должен быть создан на краю большого эллипса в том направлении, где был щелчок , Углы отключены, и я не очень уверен в расчетах, плюс я думаю, что тот факт, что эта система координат увеличивается, когда она идет вниз, закручивает ее. Может ли кто-нибудь помочь мне получить желаемый результат?Вычисление угла от одной точки к другой

HTML

<html> 
<head> 
    <script src='processing-1.4.1.min.js'></script> 
    <script src='jquery-1.9.1.min.js'></script> 
</head> 

<body> 
    <canvas id="gamecanvas" data-processing-sources="canvas.pde"></canvas> 
</body> 

<script> 
var gamecanvas = document.getElementById("gamecanvas"); 
var projectiles = []; 

$("#gamecanvas").click(function(e) { 
    var x = e.clientX - gamecanvas.offsetLeft; 
    var y = e.clientY - gamecanvas.offsetTop; 
    var pindex = projectiles.length; 
    projectiles[pindex] = []; 
    projectiles[pindex]['angle'] = Math.atan2(y - 200, x - 300) * 180/Math.PI; 
    projectiles[pindex]['x'] = 300 + 10 * Math.cos(projectiles[pindex]['angle']); 
    projectiles[pindex]['y'] = 200 + 10 * Math.sin(projectiles[pindex]['angle']); 
}); 
</script> 
</html> 

Processing.js Холст Sketch (Reference)

void draw() { 
    size(600,400); 
    background(255,255,255); 
    fill(#FF0000); 
    ellipse(300,200,15,15); 
    for(i = 0;i < projectiles.length;i++) { 
     ellipse(projectiles[i]['x'],projectiles[i]['y'],2,2); 
    } 
} 

ответ

2

Вы смешиваете радиан и степеней здесь. Функции JavaScript Math, который имеет дело с углами потребности радианах значения:

От MDN:

Метод atan2 возвращает числовое значение между -pi и пи , представляющее угол тета ап (х, у) пункт. Это против часовой стрелки, , измеренный в радианах, между положительной осью X и точкой (x, y).

И Math.cos и Math.sin:

Номер, присвоенный в единицы радиан.

так что вы могли бы попробовать с этим вместо того, чтобы:

/// keep radians, don't convert to degrees 
projectiles[pindex]['angle'] = Math.atan2(y - 200, x - 300); // * 180/Math.PI; 

projectiles[pindex]['x'] = 300 + 10 * Math.cos(projectiles[pindex]['angle']); 
projectiles[pindex]['y'] = 200 + 10 * Math.sin(projectiles[pindex]['angle']); 

Если вы не хотите держать градусов, которые в случае вам нужно сделать это:

projectiles[pindex]['angle'] = Math.atan2(y - 200, x - 300) * 180/Math.PI; 

/// convert degrees back to radians 
projectiles[pindex]['x'] = 
      300 + 10 * Math.cos(projectiles[pindex]['angle'] * Math.PI/180); 
projectiles[pindex]['y'] = 
      200 + 10 * Math.sin(projectiles[pindex]['angle'] * Math.PI/180); 
Смежные вопросы