Tọa độ vòng tròn thành mảng trong Javascript

Question

Cách tốt nhất để thêm tọa độ của vòng kết nối vào mảng trong JavaScript là gì? Cho đến nay tôi chỉ có thể làm một nửa vòng tròn, nhưng tôi cần một công thức trả về toàn bộ vòng tròn cho hai mảng khác nhau: xValues ​​và yValues. (Tôi đang cố gắng để có được các tọa độ vì vậy tôi có thể làm động một đối tượng dọc theo một con đường.)

Dưới đây là những gì tôi có cho đến nay:

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

Answer 1

vòng lặp của bạn nên được thiết lập như thế này thay vì:

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

• Bắt đầu của bạn vòng lặp tại 0
• Bước qua toàn bộ phạm vi 2 * PI, không chỉ PI.
• Bạn không nên có var xValues = [centerX]; var yValues = [centerY]; - tâm của vòng tròn không phải là một phần của nó.

Answer 2

Nếu bạn đã có một nửa vòng tròn, chỉ phản ánh các điểm để nhận nửa còn lại
hãy đảm bảo bạn thực hiện việc này theo đúng thứ tự.

hơn speficically, cho nửa còn lại bạn chỉ cần thay thế "+ sin(...)" với một "- sin(...)"

Answer 3

Bạn cần phải sử dụng một chức năng một phần để nhập radian vào cos và tội lỗi; do đó lấy các giá trị bạn nhận được cho một phần tư hoặc một nửa vòng tròn và phản ánh chúng qua trục của điểm giữa để có vòng tròn đầy đủ của bạn.

Điều đó nói rằng tội lỗi và cos của JavaScript không phải là khá cầu kỳ, vì vậy bạn phải giảm một nửa radian của bạn hoặc một cái gì đó; Tôi muốn viết nó là:

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

Tôi giả định rằng vì bất kỳ lý do nào bạn muốn xValues ​​[0] và yValues ​​[0] là centerX và centerY. Tôi không thể tìm ra lý do tại sao bạn muốn điều đó, vì chúng là những giá trị được chuyển vào hàm.

Answer 4

tôi đã có thể giải quyết nó một mình bằng cách nhân số lượng các bước 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)); 
    } 
} 

Answer 5

Thuật toán của Bresenham nhanh hơn. Bạn nghe về nó liên quan đến việc vẽ các đường thẳng, nhưng có một hình thức của thuật toán cho các vòng tròn.

Cho dù bạn sử dụng hoặc tiếp tục với các phép tính trig (nhanh hơn những ngày này) - bạn chỉ cần vẽ 1/8 vòng tròn. Bằng cách hoán đổi x, y bạn có thể nhận được 1/8 khác, và sau đó là âm của x, của y, và của cả hai - hoán đổi và không thay đổi - cho bạn điểm cho tất cả phần còn lại của vòng tròn. Tăng tốc 8x!

Answer 6

Thay đổi:

Math.PI * i/steps 

tới:

2*Math.PI * i/steps 

Một vòng tròn đầy đủ là radian 2pi, và bạn chỉ sẽ radian pi.