원 좌표하는 배열에서 Javascript

StackOverflow https://stackoverflow.com/questions/155649

문제

최선의 방법은 무엇일하여 추가의 좌표를 원하는 배열에서 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에서 루프를 시작하십시오
  • PI뿐만 아니라 전체 2 * PI 범위를 밟으십시오.
  • 당신은 가져서는 안됩니다 var xValues = [centerX]; var yValues = [centerY]; - 원의 중심은 그것의 일부가 아닙니다.

다른 팁

Bresenham의 알고리즘이 훨씬 빠릅니다. 직선을 그리는 것과 관련하여 듣지 만 원에 대한 알고리즘 형태가 있습니다.

당신이 그것을 사용하든, 트리그 계산을 계속하든 (요즘은 빨리 빠져 있음) 원의 1/8 만 그려야합니다. x를 교환하면 y가 다른 1/8을 얻을 수 있으며, x의 음수, y 및 둘 다 - 교환 및 스왑되지 않은 둘 다 나머지 모든 원에 대한 포인트를 제공 할 수 있습니다. 8 배의 속도를 높이십시오!

변화:

Math.PI * i / steps

에게:

2*Math.PI * i / steps

전체 원은 2PI 라디안이며 PI 라디안으로 만갑니다.

이미 반원이있는 경우 다른 절반을 얻기 위해 포인트를 반영합니다.
올바른 순서 로이 작업을 수행하십시오.

더 speficely, 나머지 절반은 단순히 "를 대체합니다.+ sin(...)"와 함께"- sin(...)"

야 할 부분을 사용하는 함수를 입력 라디안으로까 및 sin;따라서 값을 가져 당신이 있어요 분기 또는 반의 원고에 반영을 통해 센터 포인트를'축을 얻습니다.

는 자바 스크립트의 죄와 cos 지 까다로운,그래서 당신이 있어야 합 절반으로 귀하의 부채 또는 무언가를;나가기:

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));
   }
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top