如何使用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,000,000,000,进行计算,然后除以相同的数量)
- 通过将缩放功能内置到代码中,并在缩放时重新绘制显示内容
注意:据我发现,只有#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屋!