那些遇到过的问题

如何使用 start 和 endAngle 渲染 svg 圆

Akb*_*sha 5 javascript geometry svg path 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;
                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;
            }
Run Code Online (Sandbox Code Playgroud)

示例链接： https: //jsfiddle.net/fNPvf/43106/

在此输入图像描述

绿色圆圈渲染正确，因为起始角度和结束角度为 90，即使我将角度更改为 0、180、270 和 360，它也会起作用。但实际的问题是红色圆圈，我使用 70，即使除了那些角度（0、90、180、270、360）之外也会出现问题。

如何清除这个问题？

Pau*_*eau 5

圆之间的差异是由于数值精度的影响造成的。由于 SVG 弧和浮点运算的工作方式，起点和终点的微小变化可能会在最终弧中被夸大。弧度越大，效果就越明显。

为了绘制圆弧，渲染器需要首先确定圆心。如果您尝试制作 360 度的圆弧，则起点和终点将几乎相同。

考虑下图：

在此输入图像描述

绿色和红色点是圆弧的起点和终点。灰色点是渲染器为了绘制圆弧而计算的圆心。

图中的弧线大约代表 359 度。现在想象一下将红点和绿点移得更近。确定中心点所需的计算将变得越来越容易受到起始坐标和结束坐标以及浮点算术函数的不准确的影响。

除此之外，sin()和cos()函数只是 sin 和 cos 曲线的近似值。请记住，浏览器 JavaScript 引擎必须平衡速度和准确性。

除此之外，大多数（如果不是全部）SVG 渲染引擎都使用贝塞尔曲线来近似圆弧。但贝塞尔曲线并不能完美地表示圆弧。

希望您现在能明白为什么会得到这样的结果。尝试用单个弧线表示大角度是一个坏主意。我个人的建议是至少使用三个或四个圆弧来形成一个完整的圆。

function getPathArc(center, start, end, radius) {
  if (end == start) end += 360;
  var degree = end - start;
  degree = degree < 0 ? (degree + 360) : degree;
  var points = [];
  points.push( getLocationFromAngle(start, radius, center) );
  points.push( getLocationFromAngle(start+degree/3, radius, center) );
  points.push( getLocationFromAngle(start+degree*2/3, radius, center) );
  points.push( getLocationFromAngle(end, radius, center) );
  return this.getCirclePath(points, radius, (degree < 180) ? 0 : 1);
}
			
function getCirclePath(points, radius, clockWise) {
  return ['M', points[0].x, points[0].y,
          'A', radius, radius, 0, 0, clockWise, points[1].x, points[1].y,
          'A', radius, radius, 0, 0, clockWise, points[2].x, points[2].y,
          'A', radius, radius, 0, 0, clockWise, points[3].x, points[3].y
         ].join(' ');
}
			
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
  }
}
			
document.getElementById("arc1").setAttribute("d", getPathArc({x:250,y:250}, 90, 90, 200));
document.getElementById("arc2").setAttribute("d", getPathArc({x:250,y:250}, 70, 70, 200));
Run Code Online (Sandbox Code Playgroud) 
<svg width="500" height="500">
  <path id="arc1" fill="none" stroke="green" stroke-width="8" />
  <path id="arc2" fill="none" stroke="red" stroke-width="3" />
</svg>
Run Code Online (Sandbox Code Playgroud)

Ger*_*ado 1

我会建议一个可行的解决方案，但我无法解释其确切机制（编辑：在@LeBeau回答中解释）

这是您代码中的罪魁祸首：

end -= this.isCompleteAngle(start, end) ? 0.0001 : 0;
Run Code Online (Sandbox Code Playgroud)

我们可以清楚地看到，如果我们在三元数为 时增大该值true，即增大该end变量的减法量，那么奇异的效果就会消失。让我们展示一下。

只需进行很小的减法，即可0.00001使奇怪的效果更加明显：

end -= this.isCompleteAngle(start, end) ? 0.0001 : 0;
Run Code Online (Sandbox Code Playgroud) 
function getPathArc(center, start, end, radius) {
  end -= this.isCompleteAngle(start, end) ? 0.00001 : 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;
}

window.onload = function() {
  document.getElementById("arc1").setAttribute("d", getPathArc({
    x: 250,
    y: 250
  }, 90, 90, 200));
  document.getElementById("arc2").setAttribute("d", getPathArc({
    x: 250,
    y: 250
  }, 70, 70, 200));
};
Run Code Online (Sandbox Code Playgroud)

现在进行更大的减法，0.01：

<svg width="500" height="500">
  <path id="arc1" fill="none" stroke="green" stroke-width="2" />
  <path id="arc2" fill="none" stroke="red" stroke-width="2" />
</svg>
Run Code Online (Sandbox Code Playgroud) 
function getPathArc(center, start, end, radius) {
  end -= this.isCompleteAngle(start, end) ? 0.01 : 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;
}

window.onload = function() {
  document.getElementById("arc1").setAttribute("d", getPathArc({
    x: 250,
    y: 250
  }, 90, 90, 200));
  document.getElementById("arc2").setAttribute("d", getPathArc({
    x: 250,
    y: 250
  }, 70, 70, 200));
};
Run Code Online (Sandbox Code Playgroud)

你有看到？如果减法较大，则两条弧重叠。

因此，解决方案是增加 的差异end -= someValue。

进一步的调查：

在调查这个问题时，我console.log编辑了每个变量。它们几乎是一样的。

然后，我复制了两个片段中的两个元素。令我惊讶的是，它们几乎是一样的。看一下，这是第一个片段中的两条路径：

<path id="arc1" fill="none" stroke="green" stroke-width="2" 
    d="M 250 450 A 200 200 0 1 1 250.0349065848627 449.9999969538258"></path>
<path id="arc2" fill="none" stroke="red" stroke-width="2" 
    d="M 318.40402866513375 437.93852415718163 A 200 200 0 1 1 318.40406146659313 437.9385122184236"></path>
Run Code Online (Sandbox Code Playgroud)

现在第二个片段生成的两条路径：

<path id="arc1" fill="none" stroke="green" stroke-width="2" 
    d="M 250 450 A 200 200 0 1 1 250.0000349065851 449.99999999999693"></path>
<path id="arc2" fill="none" stroke="red" stroke-width="2" 
    d="M 318.40402866513375 437.93852415718163 A 200 200 0 1 1 318.4368290834931 437.92658253955653"></path>
Run Code Online (Sandbox Code Playgroud)

正如您所看到的，除了 x 轴开始/结束值之外，红色路径几乎相同。看来，越相似，效果就越大。

为了测试这一点，让我们看看如果值完全相同（黑色圆圈标记原点）会发生什么：

<svg width="500" height="500">
  <path id="arc1" fill="none" stroke="green" stroke-width="2" />
  <path id="arc2" fill="none" stroke="red" stroke-width="2" />
</svg>
Run Code Online (Sandbox Code Playgroud)

正如我之前所说，我无法解释这一点。但我确信这里的一位 SVG 专家很快就会这么做。

归档时间：

查看次数：

1521 次

最近记录：

8 年，4 月 前
相关归档
我一直得到"Uncaught SyntaxError:Unexpected token o" 303
如何告诉JSLint/JSHint已定义了哪些全局变量 72
使用JavaScript更改对象SVG的高度/宽度 13
稳健的多边形法线计算 8
如何导入带有 svg 标签的 svg 文件？ 6
从1D中的投影重建2D形状 5
如何将文本置于节点中心？ 4
有没有人写过一些delphi代码来执行REGJUMP的工作？ 3
Powershell:获取目录中最后一个按字母数字排序的文件的路径 2
d3将文本添加到SVG rect 1
难疑归档
JavaScript闭包如何工作？ 7644
Python中追加与扩展列表方法的区别 3119
如何用JavaScript更改元素的类？ 2650
O(log n)究竟意味着什么？ 2021
为什么在数组迭代中使用"for ... in"是一个坏主意？ 1761
JavaScript中的'new'关键字是什么？ 1684
为什么++ [[]] [+ []] + [+ []]返回字符串"10"？ 1613
我应该在哪里将<script>标记放在HTML标记中？ 1392
你如何存放未跟踪的文件？ 1287
UTF-8一路走来 1146