JS前端轻量fabric.js系列物体基类

class FabricObject {
    /** 物体类型标识 */
    public type: string = 'object';
    /** 是否可见 */
    public visible: boolean = true;
    /** 是否处于激活态，也就是是否被选中 */
    public active: boolean = false;
    /** 物体位置的 top 值，就是 y */
    public top: number = 0;
    /** 物体位置的 left 值，就是 x */
    public left: number = 0;
    /** 物体的原始宽度 */
    public width: number = 0;
    /** 物体的原始高度 */
    public height: number = 0;
    /** 物体当前的缩放倍数 x */
    public scaleX: number = 1;
    /** 物体当前的缩放倍数 y */
    public scaleY: number = 1;
    /** 物体当前的旋转角度 */
    public angle: number = 0;
    /** 默认水平变换中心 left | right | center */
    public originX: string = 'center';
    /** 默认垂直变换中心 top | bottom | center */
    public originY: string = 'center';
    /** 列举常用的属性 */
    public stateProperties: string[] = ('top left width height scaleX scaleY ' + 'angle fill originX originY ' + 'stroke strokeWidth ' + 'borderWidth visible').split(' ');
    ...
    constructor(options) {
        this.initialize(options); // 初始化各种属性，就是简单的赋值
    }
    initialize(options) {
        options && this.setOptions(options);
    }
    render() {} // 绘制物体的方法
    ...
}

ctx.save(); // 之前提到过了，你要修改 ctx 上的一些配置或者画一个物体，最好先 save 一下，这是个好习惯
ctx.translate(100, 100); // 此时原点已经变到了 (100, 100) 的地方
ctx.scale(2, 2); // 坐标系放大两倍
ctx.rotate(Util.degreesToRadians(45)); // 注意 canvas 中用的都是弧度（弧度 / 2 * Math.PI = 角度 / 360)，所以需要简单换算下
ctx.fillRect(-width/2, height/2, width, height); // 绘制矩形的方法固定不变，宽高一般也不会去修改
ctx.restore(); // 画完之后还原 ctx 状态，这是个好习惯

ctx.save();
ctx.translate(0, 画布高度); // 左下角变为(0, 0) 点了
ctx.rotate(Util.degreesToRadians(30)); // 准备画左边这条边
ctx.moveTo(0, 0);
ctx.lineTo(100, 0);
ctx.rotate(Util.degreesToRadians(120)); // 准备画右边这条边
ctx.lineTo(100, 0);
ctx.rotate(Util.degreesToRadians(120)); // 准备画下面这条边
ctx.lineTo(100, 0);
ctx.restore();

ctx.save();
ctx.translate(100, 100);
ctx.scale(2, 2);
ctx.arc(0, 0, r, 0, 2 * Math.PI); // 画圆的方法始终不变
ctx.fill();
ctx.restore();

class FabricObject {
    /** 渲染物体的通用流程 */
    render(ctx: CanvasRenderingContext2D) {
        // 看不见的物体不绘制
        if (this.width === 0 || this.height === 0 || !this.visible) return;
         // 凡是要变换坐标系或者设置画笔属性都需要用先用 save 保存和再用 restore 还原，避免影响到其他东西的绘制
        ctx.save();
        // 1、坐标变换
        this.transform(ctx);
        // 2、绘制物体
        this._render(ctx);
        ctx.restore();
    }
    transform(ctx: CanvasRenderingContext2D) {
        ctx.translate(this.left, this.top);
        ctx.rotate(Util.degreesToRadians(this.angle));
        ctx.scale(this.scaleX, this.scaleY);
    }
    /** 具体由子类来实现，因为这确实是每个子类物体所独有的 */
    _render(ctx: CanvasRenderingContext2D) {}
}

/** 矩形类 */
class Rect extends FabricObject {
    /** 矩形标识 */
    public type: string = 'rect';
    /** 圆角 rx */
    public rx: number = 0;
    /** 圆角 ry */
    public ry: number = 0;
    constructor(options) {
        super(options);
        this._initStateProperties();
        this._initRxRy(options);
    }
    /** 一些共有的和独有的属性 */
    _initStateProperties() {
        this.stateProperties = this.stateProperties.concat(['rx', 'ry']);
    }
    /** 初始化圆角值 */
    _initRxRy(options) {
        this.rx = options.rx || 0;
        this.ry = options.ry || 0;
    }
    /** 单纯的绘制一个普普通通的矩形 */
    _render(ctx: CanvasRenderingContext2D) {
        let rx = this.rx || 0,
            ry = this.ry || 0,
            x = -this.width / 2,
            y = -this.height / 2,
            w = this.width,
            h = this.height;
        // 绘制一个新的东西，大部分情况下都要开启一个新路径，要养成习惯
        ctx.beginPath();
        // 从左上角开始向右顺时针画一个矩形，这里就是单纯的绘制一个规规矩矩的矩形
        // 不考虑旋转缩放啥的，因为旋转缩放会在调用 _render 函数之前处理
        // 另外这里考虑了圆角的实现，所以用到了贝塞尔曲线，不然你可以直接画成四条线段，再懒一点可以直接调用原生方法 fillRect 和 strokeRect
        // 不过自己写的话自由度更高，也方便扩展
        ctx.moveTo(x + rx, y);
        ctx.lineTo(x + w - rx, y);
        ctx.bezierCurveTo(x + w, y, x + w, y + ry, x + w, y + ry);
        ctx.lineTo(x + w, y + h - ry);
        ctx.bezierCurveTo(x + w, y + h, x + w - rx, y + h, x + w - rx, y + h);
        ctx.lineTo(x + rx, y + h);
        ctx.bezierCurveTo(x, y + h, x, y + h - ry, x, y + h - ry);
        ctx.lineTo(x, y + ry);
        ctx.bezierCurveTo(x, y, x + rx, y, x + rx, y);
        ctx.closePath();
        if (this.fill) ctx.fill();
        if (this.stroke) ctx.stroke();
    }
}

class Canvas {
    /**
     * 添加元素
     * 目前的模式是调用 add 添加物体的时候就立马渲染，如果一次性加入大量元素，就会做很多无用功
     * 所以可以优化一下，就是先批量添加元素（需要加一个变量标识），最后再统一渲染（手动调用 renderAll 函数即可），这里先了解即可
    */
    add(...args): Canvas {
        this._objects.push(...args);
        this.renderAll();
        return this;
    }
    /** 在下层画布上绘制所有物体 */
    renderAll(): Canvas {
        // 获取下层画布
        const ctx = this.contextContainer;
        // 清除画布
        this.clearContext(ctx);
        // 简单粗暴的遍历渲染
        this._objects.forEach(object => {
            // render = transfrom + _render
            object.render(ctx);
        })
        return this;
    }
}