Javascript 如何使用开始和结束角度渲染svg圆
我已经使用start和endAngle渲染了svg圆。它工作得很好。但是当我渲染整个圆（startAngle为70，endAngle为70）时，输出会有很大的不同（除了0、90、180、270）。我犯了什么错误Javascript 如何使用开始和结束角度渲染svg圆,javascript,svg,path,geometry,angle,Javascript,Svg,Path,Geometry,Angle,我已经使用start和endAngle渲染了svg圆。它工作得很好。但是当我渲染整个圆（startAngle为70，endAngle为70）时，输出会有很大的不同（除了0、90、180、270）。我犯了什么错误 function getPathArc(center, start, end, radius) { end -= this.isCompleteAngle(start, end) ? 0.0001 : 0;
function getPathArc(center, start, end, radius) {
end -= this.isCompleteAngle(start, end) ? 0.0001 : 0;
var degree = end - start;
degree = degree < 0 ? (degree + 360) : degree;
return this.getCirclePath(
center, getLocationFromAngle(start, radius, center),
getLocationFromAngle(end, radius, center), radius, (degree < 180) ? 0 : 1
);
}
function getCirclePath(center, start, end, radius, clockWise) {
return 'M ' + start.x + ' ' + start.y + ' A ' + radius + ' ' +
radius + ' 0 ' + clockWise + ' 1 ' + end.x + ' ' + end.y;
}
function getLocationFromAngle(degree, radius, center) {
var radian = (degree * Math.PI) / 180;
return {
x : Math.cos(radian) * radius + center.x,
y : Math.sin(radian) * radius + center.y
}
}
function isCompleteAngle(startAngle, endAngle) {
var totalAngle = endAngle - startAngle;
totalAngle = totalAngle <= 0 ? (totalAngle + 360) : totalAngle;
return Math.floor(totalAngle / 360) !== 0;
}
totalAngle=totalAngle我将建议一个可行的解决方案，但其确切机制我无法解释（编辑：在@LeBeau中解释） 这是代码中的罪魁祸首：
end -= this.isCompleteAngle(start, end) ? 0.0001 : 0;
trueend0.00001totalAngle=totalAngle圆之间的差异是由于数值精度的影响。由于SVG圆弧和浮点运算的工作方式，在最终圆弧中，起点和终点的微小变化可能会被夸大。圆弧跨越的角度越大，效果发挥的越大 要绘制圆弧，渲染器需要首先确定圆的中心。如果尝试绘制360度的圆弧，则起点和终点几乎相同 考虑以下示例： 绿色和红色点是圆弧的起点和终点。灰色点是圆的中心，渲染器计算圆以绘制圆弧 图中的圆弧表示大约359度。现在想象一下，将红色和绿色点移近。确定中心点所需的计算将越来越容易受到起点和终点坐标以及浮点算术函数不准确的影响 此外，
sin（）cos（）