如何实现一个轻量级的Fabric.js系列三（物体基类）

前端

2023-12-12 23:08:49

前言

在Fabric.js中，物体是绘图的基础单元。在绘制物体之前，我们需要抽象出一些物体的共性，以便后续的维护和扩展。但是每个物体都是各画各的，能有啥共性呢？

共性

1. 位置

物体都有位置，可以通过left和top属性来设置。

2. 大小

物体都有大小，可以通过width和height属性来设置。

3. 缩放

物体可以被缩放，可以通过scaleX和scaleY属性来设置。

4. 旋转

物体可以被旋转，可以通过angle属性来设置。

5. 不透明度

物体可以设置不透明度，可以通过opacity属性来设置。

6. 填充色

物体可以填充颜色，可以通过fill属性来设置。

7. 描边

物体可以设置描边，可以通过stroke属性来设置。

8. 阴影

物体可以设置阴影，可以通过shadow属性来设置。

物体基类

我们可以将这些共性抽象出一个物体基类，如下所示：

class Object {
  constructor(left, top, width, height) {
    this.left = left;
    this.top = top;
    this.width = width;
    this.height = height;
    this.scaleX = 1;
    this.scaleY = 1;
    this.angle = 0;
    this.opacity = 1;
    this.fill = 'black';
    this.stroke = 'black';
    this.shadow = null;
  }

  draw(ctx) {
    ctx.save();
    ctx.translate(this.left, this.top);
    ctx.scale(this.scaleX, this.scaleY);
    ctx.rotate(this.angle);
    ctx.globalAlpha = this.opacity;
    ctx.fillStyle = this.fill;
    ctx.strokeStyle = this.stroke;
    ctx.shadowBlur = this.shadow ? this.shadow.blur : 0;
    ctx.shadowOffsetX = this.shadow ? this.shadow.offsetX : 0;
    ctx.shadowOffsetY = this.shadow ? this.shadow.offsetY : 0;
    ctx.shadowColor = this.shadow ? this.shadow.color : 'transparent';
    this._draw(ctx);
    ctx.restore();
  }

  _draw(ctx) {}
}