纯HTML无法实现贝塞尔曲线路径编辑器，需SVG提供路径载体、JavaScript处理交互逻辑及数据结构管理锚点与控制点；核心是支持点击添加锚点、拖拽控制手柄并实时更新<path d="">字符串。
纯 HTML 无法直接实现贝塞尔曲线路径编辑器——它需要 SVG 提供路径载体、JavaScript 处理交互逻辑、以及合理的数据结构管理锚点与控制点。核心不是“画一条线”，而是让用户能点击添加锚点、拖拽控制手柄、实时更新 <path d=""> 字符串。
用 SVG path + C/Q 命令定义可编辑曲线
三次贝塞尔（C）比二次（Q）更适合编辑器场景：每个锚点自带两个独立控制点，能分别调节进出方向和曲率，方便实现平滑衔接与精细调整。
-
M x y设定起点，后续每段用C cx1 cy1 cx2 cy2 x y - 连续曲线段之间，前一段终点必须等于后一段起点；若要 C1 连续（切线连续），还需保证前一段的
cx2, cy2、当前点、后一段的cx1, cy1三点共线 - 推荐默认使用
C指令，避免Q在复杂形状中控制力不足的问题
把用户操作转为 d 属性动态更新
关键不是渲染静态图形，而是建立“坐标 ↔ 字符串”的双向映射关系。每次拖动都应触发整条路径重绘，而非局部修改。
- 用数组存每个锚点对象：
{x, y, cpx1, cpy1, cpx2, cpy2, isSmooth?} - 生成
d字符串时，遍历数组：首点用M，其余每点拼接C cpx1 cpy1 cpx2 cpy2 x y - 拖拽控制点时，只改对应字段（如
cpx1），再调用pathEl.setAttribute('d', generateD()) - 避免直接字符串拼接或正则替换
d—— 解析/序列化易出错，维护成本高
交互层需区分三种操作状态
鼠标事件要明确响应目标：是新建锚点、拖动锚点本身，还是拖拽某个控制手柄？状态分离才能避免误操作。
立即学习“前端免费学习笔记（深入）”；
- 点击空白处 → 添加新锚点（带默认控制偏移，比如 ±15px）
- 悬停在锚点上 → 显示两个手柄（
<circle>元素），并高亮该锚点 - 按下并拖动手柄 → 更新对应
cpx/cpy，同时保持另一端手柄对称（可选“镜像模式”） - 按住 Shift 拖动锚点 → 同时移动其两个控制点，保持相对位置不变
辅助视觉反馈提升编辑体验
用户看不到数学公式，但能感知几何关系。合理可视化能大幅降低学习门槛。
- 为每个锚点绘制两条虚线，分别连接到它的两个控制点，直观体现“手柄拉力方向”
- 启用“自动平滑”时，让相邻锚点的控制点自动对齐共线（可计算向量并约束）
- 路径本身用细实线描边，控制线用浅灰虚线，锚点用实心圆，手柄用空心圆+连线
- 鼠标移入路径区域时，临时显示所有锚点和手柄（避免界面杂乱）
