FabricImage.fromURL(
    'https://p26-passport.byteacctimg.com/img/user-avatar/7470b65342454dd6699a6cf772652260~300x300.image',
    (img) => { canvas.add(img) }, // 這里需要手動回調添加物體
    { width: 200, height: 200, left: 300, top: 300 }
);
FabricImage.fromURL(
    './src/beidaihe.jpeg',
    (img) => { canvas.add(img) }, // 這里需要手動回調添加物體
    { width: 200, height: 200, left: 600, top: 400 }
);

class Util {
    static loadImage(url) {
        return new Promise((resolve, reject) => { // 方便鏈式調用，promise 這玩意多寫多熟悉就懂了
            const img = document.createElement('img');
            img.onload = () => { // 先進行事件監(jiān)聽，要在請求圖片前
                img.onload = img.onerror = null;
                resolve(img);
            };
            img.onerror = () => {
                reject(new Error('Error loading ' + img.src));
            };
            img.src = url; // 這個才是真正去請求圖片
        });
    }
}

class FabricImage extends FabricObject { // 繼承基類是必須的
    public type: string = 'image'; // 類型標識
    public _element: HTMLImageElement;
    /** 默認通過 img 標簽來繪制，因為最終都是要通過該標簽繪制的 */
    constructor(element: HTMLImageElement, options) {
        super(options);
        this._initElement(element, options);
    }
    _initElement(element: HTMLImageElement, options) {
        this._element = element;
        this.setOptions(options);
        this._setWidthHeight(options);
        return this;
    }
    /** 設置圖像大小 */
    _setWidthHeight(options) {
        this.width = 'width' in options ? options.width : this.getElement() ? this.getElement().width || 0 : 0;
        this.height = 'height' in options ? options.height : this.getElement() ? this.getElement().height || 0 : 0;
    }
    /** 核心：直接調用 drawImage 繪制圖像 */
    _render(ctx: CanvasRenderingContext2D) {
        const x = -this.width / 2;
        const y = -this.height / 2;
        const elementToDraw = this._element;
        elementToDraw && ctx.drawImage(elementToDraw, x, y, this.width, this.height);
    }
    getElement() {
        return this._element;
    }
    /** 如果是根據 url 或者本地路徑加載圖像，本質都是取加載圖片完成之后在轉成 img 標簽 */
    static fromURL(url, callback, imgOptions) {
        Util.loadImage(url).then((img) => {
            callback && callback(new FabricImage(img as HTMLImageElement, imgOptions));
        });
    }
}

// key 就是事件名，key 存儲的值就是一堆回調函數
const eventObj = {
    eventName1: [cb1, cb2, ... ],
    eventName2: [cb1, cb2, cb3, ... ],
    ...
    // 比如下面這些常見的事件名
    click: [cb1, cb2, ... ],
    created: [cb1, cb2, cb3, ... ],
    mounted: [cb1, cb2, ... ],
}

/**
 * 發(fā)布訂閱，事件中心
 * 應用場景：可以在特定的時間點觸發(fā)一系列事件（在本文主要就是渲染前后、初始化物體前后、物體狀態(tài)改變時）
 */
export class EventCenter {
    private __eventListeners; // 就是上面說的 eventObj 那個對象
    /** 往某個事件里面添加回調，找到事件名所對應的數組往里push */
    on(eventName, handler) {
        if (!this.__eventListeners) {
            this.__eventListeners = {};
        }
        if (!this.__eventListeners[eventName]) {
            this.__eventListeners[eventName] = [];
        }
        this.__eventListeners[eventName].push(handler);
        return this;
    }
    /** 觸發(fā)某個事件回調，找到事件名對應的數組拿出來遍歷執(zhí)行 */
    emit(eventName, options = {}) {
        if (!this.__eventListeners) {
            return this;
        }
        let listenersForEvent = this.__eventListeners[eventName];
        if (!listenersForEvent) {
            return this;
        }
        for (let i = 0, len = listenersForEvent.length; i < len; i++) {
            listenersForEvent[i] && listenersForEvent[i].call(this, options);
        }
        this.__eventListeners[eventName] = listenersForEvent.filter((value) => value !== false);
        return this;
    }
    /** 刪除某個事件回調 */
    off(eventName, handler) {
        if (!this.__eventListeners) {
            return this;
        }
        if (arguments.length === 0) {
            // 如果沒有參數，就是解綁所有事件
            for (eventName in this.__eventListeners) {
                this._removeEventListener.call(this, eventName);
            }
        } else {
            // 解綁單個事件
            this._removeEventListener.call(this, eventName, handler);
        }
        return this;
    }
    _removeEventListener(eventName, handler) {
        if (!this.__eventListeners[eventName]) {
            return;
        }
        let eventListener = this.__eventListeners[eventName];
        // 注意：這里我們刪除監(jiān)聽一般都是置為 null 或者 false
        // 當然也可以用 splice 刪除，不過 splice 會改變數組長度，這點要尤為注意
        if (handler) {
            eventListener[eventListener.indexOf(handler)] = false;
        } else {
            eventListener.fill(false);
        }
    }
}

class Canvas extends EventCenter { // 繼承
    _initObject(obj: FabricObject) {
        obj.setupState();
        obj.setCoords();
        obj.canvas = this;
        this.emit('object:added', { target: obj }); // 畫布觸發(fā)添加物體時間
        obj.emit('added'); // 物體觸發(fā)被添加事件
    }
    renderAll() {
         this.emit('before:render');
         // 繪制所有物體...
         this.emit('after:render');
    }
    clear() {
        ...
        this.clearContext(this.contextContainer);
        this.clearContext(this.contextTop);
        this.emit('canvas:cleared'); // 觸發(fā)畫布清空事件
        this.renderAll();
        return this;
    }
    __onMouseMove(e: MouseEvent) {
        ...
        const target = this._currentTransform.target;
        if (this._currentTransform.action === 'rotate') { // 如果是旋轉物體
            this.emit('object:rotating', { target, e });
            target.emit('rotating', { e });
        } else if (this._currentTransform.action === 'scale') { // 如果是縮放物體
            this.emit('object:scaling', { target, e });
            target.emit('scaling', { e });
        } else { // 如果是拖拽物體
            this.emit('object:moving', { target, e });
            target.emit('moving', { e });
        }
        ...
        this.emit('mouse:move', { target, e });
        target && target.emit('mousemove', { e });
    }
    __onMouseUp(e: MouseEvent) {
        if (target.hasStateChanged()) { // 物體狀態(tài)改變了才派發(fā)事件
            this.emit('object:modified', { target });
            target.emit('modified');
        }
    }
}