如何在SVG中将贝塞尔曲线转为正弦曲线并实现手柄操控？

需求：制作图中所示的波形形状，支持通过蓝色手柄进行交互操控，已掌握二次贝塞尔曲线制作可变形箭头的方法，希望了解如何实现这类波形。

核心实现思路 #

这类波形本质是连续的多段贝塞尔曲线拼接，每个凸起/凹陷对应一段贝塞尔曲线，蓝色手柄就是曲线的控制点。你可以通过以下步骤实现：

1. 构建基础波形路径
   用SVG的<path>元素，通过连续的二次（Q命令）或三次（C命令）贝塞尔曲线定义波形。比如一个简单的三段波形，路径d属性可以写成：

   <path id="wavePath" d="M50,100 Q100,50 150,100 Q200,150 250,100 Q300,50 350,100" fill="none" stroke="black" stroke-width="2"/>
   

   其中Q x1,y1 x,y是二次贝塞尔命令，x1,y1就是可操控的控制点（对应蓝色手柄），x,y是曲线的终点。

2. 添加可拖拽的手柄控件
   给每个贝塞尔控制点对应添加一个圆形元素作为手柄，设置样式为蓝色，然后通过JavaScript实现拖拽逻辑，实时更新路径的控制点坐标：

   <svg width="400" height="200">
     <!-- 波形路径 -->
     <path id="wavePath" d="M50,100 Q100,50 150,100 Q200,150 250,100 Q300,50 350,100" fill="none" stroke="black" stroke-width="2"/>
     <!-- 可拖拽手柄 -->
     <circle class="handle" cx="100" cy="50" r="5" fill="#007bff" cursor="move"/>
     <circle class="handle" cx="200" cy="150" r="5" fill="#007bff" cursor="move"/>
     <circle class="handle" cx="300" cy="50" r="5" fill="#007bff" cursor="move"/>
   </svg>
   
   <script>
     const path = document.getElementById('wavePath');
     const handles = document.querySelectorAll('.handle');
     let activeHandle = null;
   
     // 解析路径的d属性，提取控制点
     function getPathPoints() {
       const d = path.getAttribute('d');
       const segments = d.split(' ');
       return [
         [parseFloat(segments[2]), parseFloat(segments[3])],
         [parseFloat(segments[5]), parseFloat(segments[6])],
         [parseFloat(segments[8]), parseFloat(segments[9])]
       ];
     }
   
     // 更新路径的d属性
     function updatePath(points) {
       const d = `M50,100 Q${points[0][0]},${points[0][1]} 150,100 Q${points[1][0]},${points[1][1]} 250,100 Q${points[2][0]},${points[2][1]} 350,100`;
       path.setAttribute('d', d);
     }
   
     // 拖拽事件绑定
     handles.forEach((handle, idx) => {
       handle.addEventListener('mousedown', () => {
         activeHandle = idx;
       });
     });
   
     document.addEventListener('mousemove', (e) => {
       if (activeHandle !== null) {
         const svg = document.querySelector('svg');
         const rect = svg.getBoundingClientRect();
         // 计算鼠标在SVG内的坐标
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         // 更新手柄位置
         handles[activeHandle].setAttribute('cx', x);
         handles[activeHandle].setAttribute('cy', y);
         // 更新路径
         const points = getPathPoints();
         points[activeHandle] = [x, y];
         updatePath(points);
       }
     });
   
     document.addEventListener('mouseup', () => {
       activeHandle = null;
     });
   </script>
   

3. 扩展复杂波形
   如果需要更复杂的波形，只需增加贝塞尔曲线的段数，对应添加更多手柄即可。如果追求更平滑的波形，可以使用三次贝塞尔曲线（C命令），它有两个控制点，能实现更细腻的曲线变形。

内容的提问来源于stack exchange，提问作者Swayamjeet Swain