JavaScript和三角/橢圓

我一直在使用這個橢圓函數（我發現在維基百科http://en.wikipedia.org/wiki/Ellipse）用於在佈局中繪製點。我一直在用橢圓形繪製兩到五個點，沒有任何問題。該函數有一個名爲'steps'的參數; 'steps'參數設置橢圓周圍繪製點的數量。JavaScript和三角/橢圓

以下是主要問題：如果'steps'（繪製的點數）等於數字7,11,13或14，則會打破。自從我進行三角學習已有幾年了，所以基本上我被卡住了。

第二個小問題：我有打印所有點的代碼，但是當我複製/粘貼並刪除無關代碼以在此處發佈時，它僅打印出最後一個繪圖點（不知道爲什麼）。

<html> 
<head> 
<script type="text/javascript"> 
    var elipticalLayout=new Array(); 
    for (i=0; i <36; i++){ 
     elipticalLayout[i]=new Array(2); 
    } 

    /* 
    * This functions returns an array containing the specified 
    * number of 'steps' (points) to draw an ellipse. 
    * 
    * @param x {double} X coordinate 
    * @param y {double} Y coordinate 
    * @param a {double} Semimajor axis 
    * @param b {double} Semiminor axis 
    * @param angle {double} Angle of the ellipse 
    * 
    * Attribution: This function is from http://en.wikipedia.org/wiki/Ellipse 
    */ 
    function calculateEllipticalLayout(x, y, a, b, angle, steps) { 

     var points = []; 

     // Angle is given by Degree Value 
     var beta = -angle * (Math.PI/180); //(Math.PI/180) converts Degree Value into Radians 
     var sinbeta = Math.sin(beta); 
     var cosbeta = Math.cos(beta); 

     for (var i = 0; i < 360; i += 360/steps) //{ 
     var alpha = i * (Math.PI/180) ; 
     var sinalpha = Math.sin(alpha); 
     var cosalpha = Math.cos(alpha); 

     var X = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta); 
     var Y = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta); 
     elipticalLayout[i/(360/steps)][0]=X; 
     elipticalLayout[i/(360/steps)][1]=Y; 
    } 

    </script> 
</head> 
<body> 
    <script type="text/javascript"> 

     calculateEllipticalLayout(300, 300, 245, 125, 15, 15); 

     for (i=0; i<elipticalLayout.length; i++){ 
      document.write(i + ", " + elipticalLayout[i][0] + ", " + elipticalLayout[i][1] + "<br>"); 
     } 
    </script> 

</body> 
</html>

來源

2011-05-16 John R

您只填寫steps elipticalLayout中的元素數。但試圖輸出36個。

這個elipticalLayout[i/(360/steps)][0]=X;是錯誤的，因爲會導致序列中由於float到int四捨五入造成的「漏洞」。

你應該有這樣的事情：

var n = 0; 
for(...) 
    elipticalLayout[n][0]=X; 
    elipticalLayout[n][1]=Y; 
    ++n;

來源

2011-05-16 01:51:23

我會考慮一下;謝謝。關於陣列，陣列反覆使用以佈置具有不同數量點的不同橢圓。我一直在追蹤步數（點數），所以數組大於實數點的數量並不是問題（雖然我意識到這不是一個優化解決方案，但我不相信數組的大小是一個問題）。 – 2011-05-16 01:56:23

修復它。謝謝。 – 2011-05-16 02:08:30

我想聲明函數內elipticalLayout並返回。以下是我如何編寫函數。

請注意，javascript中不存在「double」或甚至整數，變量的類型由其值定義。數字只是數字，它們可以是原始數字或數字對象（幾乎從不需要）。

如果您使用返回值以像素爲單位繪製位置，則可能需要先將它們四捨五入爲整數。我用一個簡單的截斷方法將它們轉換爲整數。

var elipticalLayout = []; 

/* 
* This functions returns an array containing the specified 
* number of 'steps' (points) to draw an ellipse. 
* 
* @param x  - X coordinate 
* @param y  - Y coordinate 
* @param a  - Semimajor axis 
* @param b  - Semiminor axis 
* @param angle - Angle of the ellipse 
* 
* Attribution: This function is from http://en.wikipedia.org/wiki/Ellipse 
*/ 
function calculateEllipticalLayout(x, y, a, b, angle, steps) { 

    var points = []; 
    var step = 360/steps; 
    var k = Math.PI/180; // Convert deg to rad 
    var cos = Math.cos; 
    var sin = Math.sin; 
    var i = 0; 

    // Convert angle to radians 
    var beta = -angle * k; 
    var sinbeta = sin(beta); 
    var cosbeta = cos(beta); 

    while (i < 360) { 

    var alpha = i * k; 
    var sinalpha = sin(alpha); 
    var cosalpha = cos(alpha); 

    var X = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta); 
    var Y = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta); 

    // Truncate numbers to integer and put into array 
    elipticalLayout.push([X|0, Y|0]); 

    // Keep X,Y as floats 
    // elipticalLayout.push([X, Y]); 

    i += step; 
    } 
}

來源

2011-05-16 03:33:41 RobG

JavaScript和三角/橢圓

回答

相關問題