html - 如何将svg中的贝塞尔曲线转为正弦曲线？

Question

我一直在尝试在 svg 中制作这个形状。问题是，我想用蓝色 handle 来操纵它。我已经制作了一个简单的箭头，并且能够使用二次贝塞尔曲线改变其形状。但我不知道如何做这种形状。有什么方法可以将线条转换成这种波浪形吗？

Answer 1

您可以使用 getPointAtLength 和 getTotalLength API 沿着任意 SVG 几何体“骑行”，并生成正弦波。

这是一个纯 TypeScript 示例 ( find an interactive React CodeSandbox with a couple extra bells and whistles here )。

function computeWave(
  path: SVGPathElement,
  freq: number,
  maxAmp: number,
  phase: number,
  res: number
) {
  // Get the points of the geometry with the given resolution
  const length = path.getTotalLength();
  const points = [];
  if (res < 0.1) res = 0.1; // prevent infinite loop
  for (let i = 0; i <= length + res; i += res) {
    const { x, y } = path.getPointAtLength(i);
    points.push([x, y]);
  }
  // For each of those points, generate a new point...
  const sinePoints = [];
  for (let i = 0; i < points.length - 1; i++) {
    // Numerical computation of the angle between this and the next point
    const [x0, y0] = points[i];
    const [x1, y1] = points[i + 1];
    const ang = Math.atan2(y1 - y0, x1 - x0);
    // Turn that 90 degrees for the normal angle (pointing "left" as far
    // as the geometry is considered):
    const normalAngle = ang - Math.PI / 2;
    // Compute the sine-wave phase at this point.
    const pointPhase = ((i / (points.length - 1)) * freq - phase) * Math.PI * 2;
    // Compute the sine-wave amplitude at this point.
    const amp = Math.sin(pointPhase) * maxAmp;
    // Apply that to the current point.
    const x = x0 + Math.cos(normalAngle) * amp;
    const y = y0 + Math.sin(normalAngle) * amp;
    sinePoints.push([x, y]);
  }
  // Terminate the sine points where the shape ends.
  sinePoints.push(points[points.length - 1]);
  // Compute SVG polyline string.
  return sinePoints
    .map(([x, y], i) => `${i === 0 ? "M" : "L"}${x},${y}`)
    .join(" ");
}

生成橙色线后面的蓝色线(描述为M100,100 C150,100,150,250,200,200):

您当然可以将此调整为例如在末端“捏住”波，以避免任意相位的突然结束等。