图形编辑器开发：绘制图形工具-51CTO.COM

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

今天来介绍如何实现图形绘制工具，实现绘制任意的图形。

编辑器 github 地址：
https://github.com/F-star/suika
线上体验：
https://blog.fstars.wang/app/suika/

我之前讲过如何实现工具类管理类的：

《图形编辑器：工具管理和切换》

对应的工具类的实现会围绕用户的按下鼠标、拖拽、释放这 3 个行为，图形绘制工具同样如此。

整体框架：

// 绘制图形工具类（这里用了抽象类，后面会说为什么）
abstract class DrawGraphTool {
  // 工具被激活
  active() {
    // 通常是设置光标，或是绑定一些事件，比如键盘事件
  }
  // 工具失活
  inactive() {
    // 通常是解绑一些事件
  }
  
  // 鼠标按下
  start() { /* TODO */ }
  // 鼠标拖拽
  drag() { /* TODO */ }
  // 鼠标释放
  end() { /* TODO */ }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

类似 React / Vue 的生命周期 hook。

模板模式

图形有很多种，矩形、椭圆、三角形、五角星等等。每个图形都实现一遍未免有点繁琐。

西瓜哥我一开始是分别去实现绘制矩形和椭圆的，然后发现有很多相同的逻辑。当又要加一个新的图形时，又要复制粘贴，然后修改少量的不一样的地方，这不利于代码维护。

为解决这个问题，我们要实现一个绘制图形基类，将共用逻辑放到里面，不同的部分则交给子类去实现。

这个在设计模式上叫做模板模式。

所谓模板模式，就是在方法中定义一个 “算法” 骨架，继承的子类在不改变算法整体结构的情况下，重写其中某些步骤（有些步骤有默认实现，可不重写）。

模板模式的具体实现，就是用抽象类（abstract class）去实现这个基类。

抽象类是一种不能被实例化的特殊类，继承的子类才能实例化。

抽象类的方法可以是普通方法，也可以是只定义了方法类型签名的抽象方法。

子类继承抽象类时，必须提供抽象类的抽象方法的具体实现。

TypeScript 支持抽象类。下面是一个例子。

// 抽象类
abstract class AbstractClass {
  say() {
    if (this.shoudISaySomething()) {
      console.log('前端西瓜哥')
    }
  }
  // 抽象方法（不能用 private，因为子类要重写它）
  protected abstract shoudISaySomething(): boolean
}

class A extends AbstractClass {
  shoudISaySomething() {
    // ...假设这里一堆判断
    return true
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

子类不实现抽象方法的话，TS 编译会报错：

如果你用 JavaScript，虽然不能做编译时的检验，但还可以做运行时的检测。

将需要子类继承实现的方法，加入抛出错误的实现。这样子类如果没实现，就会通过原型链的方式，执行基类的方法，然后报错提示给开发者。

class AbstractClass {
  say() {
    if (this.shoudISaySomething()) {
      console.log('前端西瓜哥')
    }
  }
  shoudISaySomething() {
    throw new Error('请实现 shoudISaySomething 方法')
  }
}

class A extends AbstractClass {
  shoudISaySomething() {
    // ...假设这里一堆逻辑
    return true
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

图形绘制工具的实现

我们回到绘制图形的业务逻辑。

我们在鼠标按下时确定起始坐标，拖拽时调整终点坐标，鼠标释放确认终点坐标。

这里产生了一个矩形框，得到 x、y、width、height，通过它们可以确定了一个图形的位置和大小。

当要加一个新的图形时，只要它能够通过 x、y、width、height 这几个属性确定绘制效果，那就可以使用这个基类。

如果这个图形还有其他属性，我们可以在绘制后通过其他方式（比如控制点或者面板修改值）去修改。

鼠标按下

首先是鼠标按下的逻辑。逻辑很少，主要是记录起始点。

abstract class DrawGraphTool {
  commandDesc = 'Add Graph'; // 历史记录的命令描述
  protected drawingGraph: Graph | null = null; // 被绘制的图形对象
  
  
  start(e: PointerEvent) {
    // 这里将光标的视口坐标转成场景坐标
    this.startPoint = this.editor.getSceneCursorXY(e);
    
    // 重置一些状态
    this.drawingGraph = null;
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

鼠标拖拽

拖拽的时候，会判断 this.drawingGraph 是否为 null。

如果是，就会创建一个新的图形对象。如果不是，那就更新 this.drawingGraph 的 x、y、 width、height 属性。

abstract class DrawGraphTool {
  private lastDragPoint!: IPoint;
  
  drag(e: PointerEvent) {
    // 记录终点坐标
    this.lastDragPoint = this.editor.getSceneCursorXY(e);
    this.updateRect();
  }
  
  // 更新矩形选框，并对图形对象进行操作
  private updateRect() {
    const { x, y } = this.lastDragPoint;
    const sceneGraph = this.editor.sceneGraph;
    const { x: startX, y: startY } = this.startPoint;

    const width = x - startX; // 这个可能是负数，还没做标准化
    const height = y - startY; // 同上

    const rect = {
      x: startX,
      y: startY,
      width,
      height,
    };

    // 按住shift键，通过算法把矩形变成方形。
    if (this.editor.hostEventManager.isShiftPressing) {
      this.adjustSizeWhenShiftPressing(rect);
    }

    if (this.drawingGraph) {
      // （1）更新图形逻辑
      this.updateGraph(rect);
    } else {
      // （2）创建图形逻辑
      const element = this.createGraph(rect)!;
      sceneGraph.addItems([element]);

      this.drawingGraph = element;
    }
    // 设置选中对象，并渲染
    this.editor.selectedElements.setItems([this.drawingGraph]);
    sceneGraph.render();
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.

创建图形

创建图形对象的方法是 createGraph()，要返回一个图形对象，保存到 this.drawingGraph。

这个图形对象需要子类来提供。所以写成抽象方法：

protected abstract createGraph(rect: IRect, noMove?: boolean): Graph | null;1.

我们的矩形绘制工具，实现如下。

export class DrawRectTool extends DrawGraphTool implements ITool {
 // ...
  
  // 这里提供实现创建图形对象
  protected createGraph(rect: IRect) {
    rect = normalizeRect(rect);
    return new Rect({
      ...rect,
      fill: [cloneDeep(this.editor.setting.get('firstFill'))],
    });
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

这里用 normalizeRect 对 rect 对象做了标准化，原来 width 和 height 可能为负数，标准化就是改变 x、y，并让 width 和 height 变回正数，变成一个常规的 rect 对象。

这样我们拿到了图形对象通用属性：x、y、width、height，然后这里再补上了一个默认的填充色。

如果要实现绘制直线，就不要提供填充色，而是要补一个默认描边。

更新图形

更新图形通常就是更新一下图形的 x、y、width、height 属性，所以基类会提供一个默认实现。

/**
 * 这个是通用逻辑，直接更新 x、y、width、height
 */
protected updateGraph(rect: IRect) {
  // 对矩形标准化
  rect = normalizeRect(rect);

  const drawingShape = this.drawingGraph!;
  drawingShape.x = rect.x;
  drawingShape.y = rect.y;
  drawingShape.width = rect.width;
  drawingShape.height = rect.height;
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

当然有些图形并不是这样的逻辑，那子类就需要重写 updateGraph 方法。

比如绘制直线就比较特殊，它更新的是 width 和 rotation，height 则永远是 0，需要另写一个算法去实现转换。

Shift 模式

这里有个比较特别的效果，就是按住 Shift，会让图形的宽高比保持一比一。

绘制正方形：

绘制圆形：

实现就是找 width 和 height 绝对值大的那一个，然后符号保持不变，两者的绝对值都变成这个最大值。

protected adjustSizeWhenShiftPressing(rect: IRect) {
  // pressing Shift to draw a square
  const { width, height } = rect;
  
  const size = Math.max(Math.abs(width), Math.abs(height));
  // Math.sign() 方法可能会返回 0，所以要兜底为 1
  rect.height = (Math.sign(height) || 1) * size;
  rect.width = (Math.sign(width) || 1) * size;
}1.
2.
3.
4.
5.
6.
7.
8.
9.

子类如果比较特殊（没错说的就是你，直线工具），可重写该方法。

顺带一提，还有一种 Alt 模式，会将起始点作为图形的中心点进行绘制，这个我还没去实现。

鼠标释放

鼠标释放时，主要逻辑是将新的状态保持到历史记录中。

end(e: PointerEvent) {
  if (this.drawingGraph) {
    // 记录新的状态
    this.editor.commandManager.pushCommand(
      new AddShapeCommand(this.commandDesc, this.editor, [this.drawingGraph]),
    );
  }
}1.
2.
3.
4.
5.
6.
7.
8.

结尾

模板模式的优点是复用和扩展。相同的主体框架逻辑不变，暴露几个方法让子类实现，有些是必须实现，有些是可实现可不实现（不实现用默认算法），对我们实现一种通用的绘制图形工具很有帮助。

实现了这个图形绘制基类后，我们理论上就可以绘制任何图形了，甚至用户自定义的图形，只要这些图形对象使用 x、y、 width、height。