Координаты круга в массив в Javascript
Как лучше всего добавить координаты круга в массив в JavaScript? Пока что я смог сделать только полукруг, но мне нужна формула, которая возвращает весь круг в два разных массива: xValues и yValues. (Я пытаюсь получить координаты, чтобы анимировать объект по пути.)
Вот что у меня есть на данный момент:
circle: function(radius, steps, centerX, centerY){
var xValues = [centerX];
var yValues = [centerY];
for (var i = 1; i < steps; i++) {
xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps-Math.PI/2));
yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps-Math.PI/2));
}
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Если у вас уже есть полукруг, просто отразите точки, чтобы получить вторую половину. убедитесь, что вы делаете это в правильном порядке.
более конкретно, для другой половины вы просто заменяете «+ sin(...)» на «- sin(...)».
Вам нужно использовать частичную функцию, чтобы ввести радианы в cos и sin; поэтому возьмите значения, которые вы получаете для четверти или половины круга, и отразите их по оси центральных точек, чтобы получить полный круг.
При этом sin и cos в JavaScript не так разборчивы, так что вы, должно быть, вдвое уменьшили свой радиан или что-то в этом роде; Я бы написал это так:
function circle(radius, steps, centerX, centerY){
var xValues = [centerX];
var yValues = [centerY];
var table = "<tr><th>Step</th><th>X</th><th>Y</th></tr>";
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "red"
ctx.beginPath();
for (var i = 0; i <= steps; i++) {
var radian = (2*Math.PI) * (i/steps);
xValues[i+1] = centerX + radius * Math.cos(radian);
yValues[i+1] = centerY + radius * Math.sin(radian);
if (0==i){ctx.moveTo(xValues[i+1],yValues[i+1]);}else{ctx.lineTo(xValues[i+1],yValues[i+1]);}
table += "<tr><td>" + i + "</td><td>" + xValues[i+1] + "</td><td>" + yValues[i+1] + "</td></tr>";
}
ctx.fill();
return table;
}
document.body.innerHTML = "<canvas id=\"canvas\" width=\"300\" height=\"300\"></canvas><table id=\"table\"/>";
document.getElementById("table").innerHTML+=circle(150,15,150,150);
Я предположил, что по какой-то причине вы хотите, чтобы xValues [0] и yValues [0] были centerX и centerY. Я не могу понять, зачем вам это нужно, поскольку они уже переданы в функцию значениями.
Я смог решить ее самостоятельно, умножив количество шагов на 2:
circle: function(radius, steps, centerX, centerY){
var xValues = [centerX];
var yValues = [centerY];
for (var i = 1; i < steps; i++) {
xValues[i] = (centerX + radius * Math.cos(Math.PI * i / steps*2-Math.PI/2));
yValues[i] = (centerY + radius * Math.sin(Math.PI * i / steps*2-Math.PI/2));
}
}
Обратите внимание, что это решение работает, но по другой причине, нежели указанная вами. Вы сказали «умножение количества шагов на 2», но ваше выражение на самом деле означает: ((Math.PI * i) / steps) * 2 из-за ассоциативности.
Вместо этого ваш цикл должен быть настроен следующим образом:
for (var i = 0; i < steps; i++) {
xValues[i] = (centerX + radius * Math.cos(2 * Math.PI * i / steps));
yValues[i] = (centerY + radius * Math.sin(2 * Math.PI * i / steps));
}
- Начните цикл с 0
- Пройдите через весь диапазон 2 * PI, а не только PI.
- У вас не должно быть
var xValues = [centerX]; var yValues = [centerY];- центр круга не является его частью.
Кроме того, я бы сначала сохранил вычисление фазы в локальной переменной: var phase = 2 * Math.PI * i / steps;
как вы можете сохранить фазу, если есть переменная 'i'?
Алгоритм Брезенхема намного быстрее. Вы слышали об этом применительно к рисованию прямых линий, но есть форма алгоритма для кругов.
Независимо от того, используете ли вы это или продолжаете расчеты триггеров (которые в наши дни невероятно быстрые) - вам нужно нарисовать только 1/8 круга. Поменяв местами x, y, вы можете получить еще 1/8, а затем отрицательное значение x, y и обоих - поменяв местами и не поменяв местами - дает вам очки для всего остального круга. Ускорение в 8 раз!
Изменять:
Math.PI * i / steps
к:
2*Math.PI * i / steps
Полный круг равен 2 радианам на дюйм, а у вас - только радианам пи.
var π=Math.PI;is syntactically valid JavaScript; you could then refer to π with it's actual symbol, for example,var x=radius*Math.cos(angle*180/π), y=radius*Math.sin(angle*180/π);