图形编辑器开发：钢笔工具的实现

前端西瓜哥

发布于 2024-04-19 18:51:11

580

发布于 2024-04-19 18:51:11

文章被收录于专栏：前端西瓜哥的前端文章前端西瓜哥的前端文章

大家好，我是前端西瓜哥。

这次讲解钢笔工具的实现思路。

先看一下整体效果：

我正在开发的 suika 图形编辑器： https://github.com/F-star/suika 线上体验： https://blog.fstars.wang/app/suika/

钢笔工具的作用

钢笔工具的作用是：绘制一些复杂的图形。

这种图形叫做路径 Path，你也可以理解为多段线。

它将多条相对简单的线连接并做节点的光滑处理，最终变成一条灵活复杂的线。

像是 SVG 的 Path 的元素，单段的线有直线、圆弧、椭圆弧、二阶贝塞尔曲线、三阶段贝塞尔曲线等。

为数据标准化，以及简化用户操作，我们常常选择灵活性和表现力优秀的 三阶段贝塞尔曲线 来表达路径。

关于钢笔工具更多功能说明，可以看我的这篇钢笔工具说明书：

《图形编辑器开发：钢笔工具功能说明书》

这里会假设你已经看过这篇文章，后面的内容不会过多讲解一些专业术语。

Path 图形类

首先要定义好钢笔所绘制的图形：Path。

我选择 segment 的表达方式，如图。

设计的 Path 的数据结构为：

// 注意这里存的是数组
type PathData = PathItem[];

interface Segment {
  point: { x: number; y: number };   // 锚点
  in: { x: number; y: number }; // 入点（这里用的相对坐标，相对锚点）
  out: { x: number; y: number }; // 出点（同上）
}

interface PathItem {
  segs: Segment[];
  closed: boolean;
}

这是一个 复杂 Path，由多个简单 Path 组成。

比如对下面 Path 图形，

它的表达大致为：

const pathData = [
  {
    // pathItem 0
    segs: [
      {
        point: { x: 84.2705, y: 194.5 },
        in: { x: 145.5, y: 37 },
        out: { x: -145.5, y: -37 },
      },
      // ...
    ],
    closed: false, // 不闭合
  },
  // pathItem 1
  {
    segs: [
      {
        point: { x: 251.2708, y: 66 },
        in: { x: 0, y: 0 },
        out: { x: 0, y: 0 },
      },
      // ...
    ],
    closed: true, // 闭合
  },
];

至于渲染，基本所有渲染引擎都支持 Path 的渲染，只要把数据结构转换一下就可以了。

比如，对于 SVG 可以用 Path 元素的 C 命令；对于 Canvas 2D 可以用 bezierCurveTo 方法。

另外，如果要做高级版的 Path：Figma 的矢量网格，是需要自己实现渲染器逻辑的，这也是我没选择实现它而是使用更通用的 Path 的原因。

Path 编辑器

图形编辑器有很多子模块，比如快捷键、工具的管理。

这样我们就可以通过 delete 键删除图形，将当前工具切换为绘制矩形工具以绘制矩形。

当绘制 Path 的时候，需要进入 Path 编辑器，此时我们需要 接管改写原来编辑器的一些功能。

1、临时禁用一些工具包括它们的快捷键，只开启和 Path 编辑相关的工具。

// 记录好原来的可用工具，后面退出 Path 编辑器时需要复原
this.prevToolKeys = editor.toolManager.getEnableTools();

// 只开启 Path 相关工具
editor.toolManager.setEnableHotKeyTools([
  PathSelectTool.type,
  DrawPathTool.type,
]);

此时其他工具无法通过任何方式进行切换，比如快捷键。这么做是防止用户误操作，不小心退出还没完成的 Path 的编辑。

另外可以考虑通过事件的方式通知 UI 层，只显示当前能用的工具。

2、禁用一些功能。

比如高亮选中图形的轮廓，悬停在某个图形上，通知图层面板高亮对应 item。

editor.sceneGraph.showSelectedGraphsOutline = false;
editor.sceneGraph.highlightLayersOnHover = false;

3、覆盖或新增一些快捷键。

比如 Esc 键，原来的效果是回到选择工具以及取消图形选中，现在要改写为取消 Path 控制点的选中状态，以及退出 Path 编辑器。

此外还有 Enter 键，注册为退出 Path 编辑器。Delete 原来是删除选中的图形，要改写为删除选中的曲线片段。等等。

因为我的快捷键管理使用的是 短路模式（匹配到一个就结束），所以额外注册一个高优先级的事件响应函数就完事了。

退出 Path 编辑器后，这些功能覆写都需要进行还原。

Path 控制点管理

此外，我们还要维护选中的 Path 的控制点，所以我们声明一个 SelectedControl 类，放到 PathEditor 下。

该模块的作用是，维护已经被选中的控制点，计算 Path 上需要渲染的控制点进行渲染。

SelectedControl 记录当前 Path 上被选中的控制点：

const selected = [
  // 锚点控制点，在索引值为 0 的 path 上的索引值为 1 的 seg 上
  { type: 'anchor', pathIdx: 0, segIdx: 1 }
  // ...
  { type: 'anchor', pathIdx: 0, segIdx: 2 }
]

控制点除了 anchor、还有 in、out、curve。