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;
    }
}