JS前端輕量fabric.js系列之畫佈初始化

const canvas = document.getElementById('canvas') || document.createElement('canvas');
const width = canvas.width;
const height = canvas.height;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

#canvas { width: 200px; height: 100px; }
<canvas id="canvas" width="100" height="100"></canvas>

/** 畫佈類 */
class Canvas {
    /** 畫佈寬度 */
    public width: number;
    /** 畫佈高度 */
    public height: number;
    /** 包圍 canvas 的外層 div 容器 */
    public wrapperEl: HTMLElement;
    /** 下層 canvas 畫佈，主要用於繪制所有物體 */
    public lowerCanvasEl: HTMLCanvasElement;
    /** 上層 canvas，主要用於監聽鼠標事件、塗鴉模式、左鍵點擊拖藍框選區域 */
    public upperCanvasEl: HTMLCanvasElement;
    /** 緩沖層畫佈 */
    public cacheCanvasEl: HTMLCanvasElement;
    /** 上層畫佈環境 */
    public contextTop: CanvasRenderingContext2D;
    /** 下層畫佈環境 */
    public contextContainer: CanvasRenderingContext2D;
    /** 緩沖層畫佈環境 */
    public contextCache: CanvasRenderingContext2D;
    /** 整個畫佈到上面和左邊的偏移量 */
    private _offset: Offset;
    /** 畫佈中所有添加的物體 */
    private _objects: FabricObject[];
    constructor(el: HTMLCanvasElement, options) {
        // 初始化下層畫佈 lower-canvas
        this._initStatic(el, options);
        // 初始化上層畫佈 upper-canvas
        this._initInteractive();
        // 初始化緩沖層畫佈
        this._createCacheCanvas();
    }
    // 下層畫佈初始化：參數賦值、重置寬高，並賦予樣式
    _initStatic(el: HTMLCanvasElement, options) {
        this.lowerCanvasEl = el;
        Util.addClass(this.lowerCanvasEl, 'lower-canvas');
        this._applyCanvasStyle(this.lowerCanvasEl);
        this.contextContainer = this.lowerCanvasEl.getContext('2d');
        for (let prop in options) {
            this[prop] = options[prop];
        }
        this.width = +this.lowerCanvasEl.width;
        this.height = +this.lowerCanvasEl.height;
        this.lowerCanvasEl.style.width = this.width + 'px';
        this.lowerCanvasEl.style.height = this.height + 'px';
    }
    // 其餘兩個畫佈同理
}

const PiBy180 = Math.PI / 180; // 寫在這裡相當於緩存，因為會頻繁調用
class Util {
     /** 單純的創建一個新的 canvas 元素 */
    static createCanvasElement() {
        const canvas = document.createElement('canvas');
        return canvas;
    }
    /** 角度轉弧度，註意 canvas 中用的都是弧度，但是角度對我們來說比較直觀 */
    static degreesToRadians(degrees: number): number {
        return degrees * PiBy180;
    }
    /** 弧度轉角度，註意 canvas 中用的都是弧度，但是角度對我們來說比較直觀 */
    static radiansToDegrees(radians: number): number {
        return radians / PiBy180;
    }
    /** 從數組中溢出某個元素 */
    static removeFromArray(array: any[], value: any) {
        let idx = array.indexOf(value);
        if (idx !== -1) {
            array.splice(idx, 1);
        }
        return array;
    }
    static clone(obj) {
        if (!obj || typeof obj !== 'object') return obj;
        let temp = new obj.constructor();
        for (let key in obj) {
            if (!obj[key] || typeof obj[key] !== 'object') {
                temp[key] = obj[key];
            } else {
                temp[key] = Util.clone(obj[key]);
            }
        }
        return temp;
    }
    static loadImage(url, options: any = {}) {
        return new Promise(function (resolve, reject) {
            let img = document.createElement('img');
            let done = () => {
                img.onload = img.onerror = null;
                resolve(img);
            };
            if (url) {
                img.onload = done;
                img.onerror = () => {
                    reject(new Error('Error loading ' + img.src));
                };
                options && options.crossOrigin && (img.crossOrigin = options.crossOrigin);
                img.src = url;
            } else {
                done();
            }
        });
    }
}