JavaScript 和三角/椭圆答案

【问题标题】：JavaScript and Trigonometry/OvalJavaScript 和三角/椭圆
【发布时间】：2011-05-16 11:33:41
【问题描述】：

我一直在使用这个椭圆函数（我在 Wikipedia http://en.wikipedia.org/wiki/Ellipse 找到）在布局中绘制点。我一直在围绕椭圆绘制两到五个点，没有任何问题。该函数有一个名为“steps”的参数； '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>

【问题讨论】：

标签： javascript math trigonometry

【解决方案1】：

我会在函数中声明elipticalLayout 并返回它。下面是我如何编写函数。

请注意，在 javascript 中没有“双”甚至整数之类的东西，变量的类型由其值定义。数字只是数字，它们可以是基元或数字对象（几乎从不需要）。

如果您使用返回的值来绘制以像素为单位的位置，您可能希望先将它们四舍五入为整数。我使用了一种简单的截断方法将它们转换为整数。

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

【讨论】：

【解决方案2】：

您只填写 steps elipticalLayout 中的元素数量。但试图输出其中的 36 个。

这个elipticalLayout[i/(360/steps)][0]=X; 是错误的，因为float 到int 舍入会导致序列中出现“漏洞”。

你应该有这样的东西：

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

【讨论】：

我会考虑的；谢谢。关于阵列，阵列被反复使用以布置具有不同点数的不同椭圆。我一直在跟踪步数（点），因此数组大于实际点数的事实并不是问题（尽管我意识到这不是一个优雅的解决方案，但我不相信数组的大小是一个问题）。