MotionPathHelper.editPath
MotionPathHelper.editPath( path:Element | String, config:Object ) : PathEditor
创建一个SVG<path>在浏览器中可编辑。
参数
path: 元素 | 字符串
要编辑的<path>元素。这可以是对该元素的引用，也可以是选择器文本。
config: 对象
一个可选的配置对象，用于定义onPress、onRelease、handleSize、selected、draggable等内容。
返回值 : PathEditor
一个PathEditor对象
细节
创建一个SVG<path>在浏览器中可编辑。
简单示例
MotionPathHelper.editPath("#my-path");
高级示例
MotionPathHelper.editPath("#my-path", {
handleSize: 7,
selected: true,
draggable: true,
onPress: () => console.log("pressed"),
onRelease: () => console.log("released"),
onUpdate: () => console.log("updated"),
onDeleteAnchor: () => console.log("deleted anchor"),
});
演示
加载中...
配置（Configuration）
你可以选择性地传入一个vars参数，用于进一步配置路径编辑器。它是一个对象，可以包含以下任一属性：
| 属性 | 描述 |
|---|---|
| draggable | 布尔值 - 决定路径是否初始时被选中。 |
| handleSize | 数值 - 锚点/控制柄的半径。 |
| onDeleteAnchor | 函数 - 当删除锚点时应调用的回调函数。 |
| onPress | 函数 - 当按下（mousedown/pointerdown/touchstart）锚点或路径时应调用的回调函数。 |
| onRelease | 函数 - 当鼠标/指针释放时应调用的回调函数（mouseup/pointerup/touchend/touchcancel）。 |
| onUpdate | 函数 - 当路径以任何方式更新时应调用的回调函数。 |
| selected | 布尔值 - 路径是否初始时被选中。 |
提示
编辑技巧
- 添加点：ALT+点击路径上的某个位置
- 切换平滑/角点锚点：ALT+点击锚点
- 从角点锚点获取手柄：ALT+拖动
- 选择多个锚点：SHIFT+点击（再次 SHIFT+点击取消选择）
- 删除锚点：选中它，然后按 DELETE 键。
- 撤销：CTRL+Z
- 点击并拖动手柄以改变路径曲线的方式。
- 拖动整条路径：点击并拖动路径上没有锚点的部分
