使用JavaScript平滑关闭一个SVG路径

huangapple
go评论99阅读模式
英文:

Smoothly close an SVG path with JavaScript

问题

Sure, here's the translated part:

我正在处理一些代码，其中用户放下一个数字或点/标记，然后通过它们绘制贝塞尔曲线的SVG线条（因此平滑的线连接所有点）。它基于 https://codepen.io/francoisromain/pen/dzoZZj

svg.innerHTML = svgPath(points, bezierCommand)

我创建的一个示例路径如下：

  1. <svg width="100px" height="100px" viewBox="100 200 500 400">
  2.   <path d="M 346,186.5 C 374,208.875 452,237.875 458,276 C 464,314.125 433.75,340.5 370,339 C 306.25,337.5 253,307.75 203,270 C 153,232.25 134.75,209 170,188 C 205.25,167 300.5,186.5 344,186">
  3. </svg>

到目前为止，一切都运行良好，直到我要关闭线条。如果我添加 Z，它会突然连接这些点。

如果需要关闭线条，关闭应该是一个曲线，以便最后一个点到第一个点以及第二个点之间有一个平滑的过渡...也就是整个路径成为一个“平滑”的环。

我尝试添加贝塞尔曲线，但连接点最终成为一个尖锐的凸起。我还尝试在第一个点附近添加另一个点，然后使用 Z，但同样出现尖锐凸起。

应该如何做到这一点呢？

英文:

I'm working on some code where a user drops a number or points/markers and a Bezier curved SVG line is drawn through them (so a smooth line connects all the points). It's based off

https://codepen.io/francoisromain/pen/dzoZZj

svg.innerHTML = svgPath(points, bezierCommand)

An example path that I've created is:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;svg width=&quot;100px&quot; height=&quot;100px&quot; viewBox=&quot;100 200 500 400&quot;&gt;
  2.   &lt;path d=&quot;M 346,186.5 C 374,208.875 452,237.875 458,276 C 464,314.125 433.75,340.5 370,339 C 306.25,337.5 253,307.75 203,270 C 153,232.25 134.75,209 170,188 C 205.25,167 300.5,186.5 344,186&quot;&gt;
  3. &lt;/svg&gt;

<!-- end snippet -->

So far it's working well till I get to closing the line. If I add Z it abruptly joins the points.

The closing needs to be (if necessary) a curve so that there's a gentle transition from the last point to the first and on to the second... i.e. the whole path becomes a "smooth" loop.

I tried adding a Bezier curve but the join ends up being a sharp bump. And I tried adding another point close to the first and then using Z but again I get a sharp bump.

How can this be done?

答案1

得分: 1

我修改了原始函数，以返回一个 pathData 数组（根据 SVG 2 SVGPathData 接口草案），而不是一个 d 属性字符串。
这样，我们可以轻松地操作和排序命令。

我还改变了坐标结构，使我们使用 点对象。

  1. [
  2.   { x: 344, y: 186 }
  3. ]

而不是

  1. [
  2.   [ 344, 186 ]
  3. ]

这非常方便，因为大多数原生方法，如 getPointAtLength() 或属性，如 points，也返回坐标对象。

通过附加前2个点来扩展折线

  1. points = [
  2.   { x: 344, y: 186 },
  3.   { x: 458, y: 276 },
  4.   { x: 370, y: 339 },
  5.   { x: 203, y: 270 },
  6.   { x: 170, y: 188 },
  7.   // 从开头复制的点
  8.   { x: 344, y: 186 },
  9.   { x: 458, y: 276 }
  10. ];

如果是闭合路径，附加前2个点：

  1. if (closed) {
  2.   points = points.concat(points.slice(0, 2));
  3. }

这样函数将在第一个/最后一个和第二个顶点之间创建一个平滑曲线。

使用JavaScript平滑关闭一个SVG路径

显然，这个路径有一个重叠的曲线段，我们需要删除它。此外，第一个 C 需要一些调整。

复制最后的 C 命令的第一个控制点并删除最后的命令

我们可以复制最后一个命令的第一个控制点到第一个 C 命令。

  1. // 复制最后一个命令的第一个控制点到第一个 curveto
  2. if (closed) {
  3.   let comLast = pathData[pathData.length - 1];
  4.   let valuesLastC = comLast.values;
  5.   let valuesFirstC = pathData[1].values;
  6.   
  7.   pathData[1] = {
  8.     type: "C",
  9.     values: [valuesLastC[0], valuesLastC[1], valuesFirstC.slice(2)].flat()
  10.   };
  11.   // 删除最后一个 curveto
  12.   pathData = pathData.slice(0, pathData.length - 1); 
  13. }
英文:

I modified the original function to return a pathData (according to the SVG 2 SVGPathData interface draft) the array instead of a d attribute string.
This way, we can easily manipulate and sort commands.

I've also changed the coordinate structure so we're working with point objects.

  1. [
  2.   { x: 344, y: 186 }
  3. ]

instead of

  1. [
  2.   [ 344, 186 ]
  3. ]

This pretty handy, since most native methods like getPointAtLength() or properties like points also return coordinates as objects

Extend the polyline by appending the first 2 point to the point array

  2.      points = [
  3.       { x: 344, y: 186 },
  4.       { x: 458, y: 276 },
  5.       { x: 370, y: 339 },
  6.       { x: 203, y: 270 },
  7.       { x: 170, y: 188 },
  8.        //duplicated points from the beginning
  9.       { x: 344, y: 186 },
  10.       { x: 458, y: 276 },
  11.        
  12.     ];
  1.   // append first 2 points for closed paths
  2.   if (closed) {
  3.     points = points.concat(points.slice(0, 2));
  4.   }

This way the function will create a smooth curve between first/last and second vertice.

使用JavaScript平滑关闭一个SVG路径

Obviously, this path has an overlapping curve segment, we need to remove. Besides, the first C and needs some adjustment.

Copy last C commands 1. control point and delete last command

We can copy the last command's 1st control point to the first C command.

  1.   // copy last commands 1st controlpoint to first curveto
  2.   if (closed) {
  3.     let comLast = pathData[pathData.length - 1];
  4.     let valuesLastC = comLast.values;
  5.     let valuesFirstC = pathData[1].values;
  6.     
  7.     pathData[1] = {
  8.       type: &quot;C&quot;,
  9.       values: [valuesLastC[0], valuesLastC[1], valuesFirstC.slice(2)].flat()
  10.     };
  11.     // delete last curveto
  12.     pathData = pathData.slice(0, pathData.length - 1); 
  13.   }

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

  1. let points = [
  2.   { x: 344, y: 186 },
  3.   { x: 458, y: 276 },
  4.   { x: 370, y: 339 },
  5.   { x: 203, y: 270 },
  6.   { x: 170, y: 188 }
  7. ];
  10. let smoothing = 0.3;
  11. let pathData = getCurvePathData(points, smoothing, true);
  13. // serialize pathData to d attribute string
  14. let d = pathDataToD(pathData, 1);
  15. path.setAttribute(&quot;d&quot;, d);
  18. // Render the svg &lt;path&gt; element
  19. function getCurvePathData(points, smoothing = 0.2, closed=true){ 
  20.   
  21.   // append first 2 points for closed paths
  22.   if (closed) {
  23.     points = points.concat(points.slice(0, 2));
  24.   }
  25.   
  26.   // Properties of a line
  27.   const line = (pointA, pointB) =&gt; {
  28.     const lengthX = pointB.x - pointA.x;
  29.     const lengthY = pointB.y - pointA.y;
  30.     return {
  31.       length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
  32.       angle: Math.atan2(lengthY, lengthX)
  33.     };
  34.   };
  36.   // Position of a control point
  37.   const controlPoint = (current, previous, next, reverse) =&gt; {
  38.     const p = previous || current;
  39.     const n = next || current;
  40.     const o = line(p, n);
  42.     const angle = o.angle + (reverse ? Math.PI : 0);
  43.     const length = o.length * smoothing;
  45.     const x = current.x + Math.cos(angle) * length;
  46.     const y = current.y + Math.sin(angle) * length;
  47.     return { x, y };
  48.   };
  50.   let pathData = [];
  51.   pathData.push({ type: &quot;M&quot;, values: [points[0].x, points[0].y] });
  53.   for (let i = 1; i &lt; points.length; i++) {
  54.     let point = points[i];
  55.     const cp1 = controlPoint(points[i - 1], points[i - 2], point);
  56.     const cp2 = controlPoint(point, points[i - 1], points[i + 1], true);
  57.     //console.log( i, &#39;a&#39;, a)
  58.     const command = {
  59.       type: &quot;C&quot;,
  60.       values: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]
  61.     };
  63.     pathData.push(command);
  64.   }
  65.   
  66.   // copy last commands 1st controlpoint to first curveto
  67.   if (closed) {
  68.     let comLast = pathData[pathData.length - 1];
  69.     let valuesLastC = comLast.values;
  70.     let valuesFirstC = pathData[1].values;
  71.     
  72.     pathData[1] = {
  73.       type: &quot;C&quot;,
  74.       values: [valuesLastC[0], valuesLastC[1], valuesFirstC.slice(2)].flat()
  75.     };
  76.     // delete last curveto
  77.     pathData = pathData.slice(0, pathData.length - 1); 
  78.   }
  79.   
  80.   return pathData;
  81. };
  83. // convert pathdata to d attribute string
  84. function pathDataToD(pathData, decimals=3){
  85.   let d = pathData
  86.   .map((com) =&gt; {
  87.     return `${com.type}${com.values.map(value=&gt;{return +value.toFixed(decimals)}).join(&quot; &quot;)}`;
  88.   })
  89.   .join(&quot; &quot;);
  90.   return d;
  91. }

<!-- language: lang-html -->

  1. &lt;svg viewBox=&quot;0 0 500 500&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; id=&quot;svg&quot;&gt;
  2.   &lt;path id=&quot;pathPoly&quot; fill=&quot;none&quot; stroke=&quot;green&quot;&gt;&lt;/path&gt;
  3.   &lt;path id=&quot;path&quot; fill=&quot;none&quot; stroke=&quot;#000&quot;&gt;&lt;/path&gt;
  4. &lt;/svg&gt;

<!-- end snippet -->

See original post by François Romain: Smooth a Svg path with cubic bezier curves)

huangapple
  • 本文由 发表于 2023年7月17日 17:09:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76702965.html
  • bezier
  • javascript
  • smoothing
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定