如何使用Javascript平均分割圆，使其正确缩放到1,000,000,000％? [英] How can Javascript be used to divide a circle equally so that it's correct to 1,000,000,000% zoom?

问题描述

从以下地点拆分: 使用浮点精度，计算圆上点的位置时会产生舍入误差.

Using floating point precision, there are rounding errors when calculating the position of points on a circle.

示例:

function pointsOnACircle (whichpoint, numberOfPoints, cx, cy, radius) {
    //Returns a point along the outside of a circle, starting at (whichpoint=1) = 0 degrees

    eachpoint = whichpoint * 2 * Math.PI /numberOfPoints;
    var thiscx = cx + (radius * Math.sin(eachpoint));
    var thiscy = cy - (radius * Math.cos(eachpoint));

    thisPoint = [ thiscx, thiscy ];

    return thisPoint;
}

如果该函数以fourthPointofSix = pointsOnACircle (4, 6, 126, 126, 63);运行，则返回的点为

If the function is run as fourthPointofSix = pointsOnACircle (4, 6, 126, 126, 63); then the points returned are

0: 71.44039956158039 1: 157.50000000000003

0: 71.44039956158039 1: 157.50000000000003

使用位于 http://www.ttmath.org/online_calculator 的计算器进行计算，数字应该是:

Calculating them with the calculator at http://www.ttmath.org/online_calculator, the numbers should be:

0: 71.440399561580365.. 1: 157.5

0: 71.440399561580365.. 1: 157.5

类似地，如果我们运行fifthPointofSix = pointsOnACircle (5, 6, 126, 126, 63);，则返回的点是:

Similarly, if we run fifthPointofSix = pointsOnACircle (5, 6, 126, 126, 63); then the points returned are:

0: 71.44039956158034 1: 94.50000000000004

0: 71.44039956158034 1: 94.50000000000004

它们应该是:

0: 71.440399561580365... 1: 94.5

0: 71.440399561580365... 1: 94.5

注意:第4点和第5点的x应该相同，但它们返回的不同

推荐答案

三个简单的答案:

1. 通过使用支持数学精度的外部库(然后有效地使用它)
2. 通过以整数形式进行计算(例如，乘以1,000,000,000，进行计算，然后除以相同的数量)
3. 通过将缩放功能内置到代码中，并在缩放时重新绘制显示内容

注意:据我发现，只有#3才能在屏幕上显示数学上准确的圆圈表示.在所有情况下，贝塞尔曲线均用于非常近似地逼近一个圆，但是在前两种情况下，1,000,000,000％的缩放比例足以表明贝塞尔曲线不是正确的圆，而在第三种情况下，为视口生成.

Note: From what I could find, only #3 will allow a mathematically accurate representation of a circle to be shown on screen. In all cases, Bézier curves are used to make a very close approximation of a circle, but in the first two cases 1,000,000,000% zoom is more than enough to show that the Bézier curves are not a correct circle, whereas in the third the curve is generated for the viewport.

这篇关于如何使用Javascript平均分割圆，使其正确缩放到1,000,000,000％?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！