Преобразование координат окружности в массив в Javascript
-
03-07-2019 - |
Вопрос
Каков наилучший способ добавить координаты окружности в массив в 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));
}
}
Решение
Вместо этого ваш цикл должен быть настроен следующим образом:
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];
-- центр круга не является его частью.
Другие советы
Алгоритм Брезенхэма намного быстрее.Вы слышали об этом в связи с рисованием прямых линий, но есть форма алгоритма для окружностей.
Используете ли вы это или продолжаете тригонометрические вычисления (которые в наши дни невероятно быстры) - вам нужно нарисовать только 1/8 окружности.Меняя местами x, y, вы можете получить еще 1/8, и тогда отрицательное значение x, y и обоих значений - поменявшихся местами и не поменявшихся местами - даст вам очки за всю оставшуюся часть круга.Ускорение в 8 раз!
Изменение:
Math.PI * i / steps
Для:
2*Math.PI * i / steps
Полный круг равен 2pi радианам, а вы переходите только к pi радианам.
Если у вас уже есть половина круга, просто зеркально отразите точки, чтобы получить другую половину
убедитесь, что вы делаете это в правильном порядке.
более конкретно, для другой половины вы просто заменяете "+ 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));
}
}