Question

我想使用SVG绘制FID轨迹曲线，类似于红色曲线：http://chem.ch.huji.ac.il/nmr/techniques/1d/pulseq_files/fid.gif

显示我的代码：

<svg>
<path d="M 180 45 q -10 10 0 20 q 40 20 -20 20 a40,20 0 1,1 -20,20 a60,30 0 1,1 -20,35 a80,30 0 1,1 -10,40 " stroke="blue" stroke-width="2" fill="none" />
</svg>

不幸的是，交界处的曲线很锐利。我无法使曲线平滑连接。

您知道如何解决我的问题吗？

Answer 1

您打算绘制的是锥形螺旋或conical spiral。基本上，我正在计算螺旋的点，然后使用点为路径构建d属性。

let r = 30;
let ry = [];// the array of points used to draw a conical helix

function getPoints() {
  var a = 0.8;// angle for the tilt

  for (var t = 0.1; t < 2 * Math.PI; t += 0.008) {
    let x = r * t * Math.cos(6 * t + a);
    let y =
      (r + r / 2 * Math.cos(a)) * t -
      r / 2 * Math.sin(a) * t * Math.sin(6 * t + a) -
      150;

    ry.push({ x, y });
  }
}

getPoints();


//using the points to build the d attribute for the path
let d = `M${ry[0].x},${ry[0].y}L`;

for (let i = 0; i < ry.length; i++) {
  d += `${ry[i].x},${ry[i].y} `;
}

ch.setAttributeNS(null, "d", d);

svg{border:1px solid; width:90vh}

<svg viewBox="-225 -225 450 450">
  <path id="ch" stroke="red" stroke-width="2" fill="none" />
</svg>

如何使用SVG创建曲线的平滑连接？

1 个答案: