給 canvas 繫結滑鼠滾輪事件，已便滾輪實現畫布縮放功能。

貌似 Fabric 和 canvas 都沒有滾輪事件，這裡使用 jquery。

webpack 專案引入 jquery，可以在檔案中直接 import

不過有個問題就是哪個檔案要用，就要在當前檔案引入，所以使用一個一勞永逸的辦法

在 webpack.config.js 中引入：

jquery 有了，下面繫結滑鼠滾輪事件，百度了一下都說是繫結 'mousewheel' 事件

這個監聽不能載入 canvas 上，而要加在 Fabric 自動生成的上層容器（.upper-canvas）中。

但是專案丟擲了錯誤，可見百度出來的東西也不一定是經過測驗的

後來看了下 jquery 裡的事件 ，發現滑鼠滾輪事件是 wheel，不是 mousewheel！

接下來在實現縮放方法

通過  event.originalEvent.deltaY 來判斷滾輪是向上還是向下

驗證之後會有如下程式碼：

抽取變數，做到靈活可配

if 判斷後呼叫計算 scale 方法

先計算畫布縮放尺寸

這裡會有一個小瑕疵，計算精度的問題：

可以 toFixed 解決一下

這裡抽取了一個  getScaleValue  的方法，用於獲取當前縮放值 和 縮放比例，比例用於後續計算尺寸

畫布計算好後，再進行包含物件的尺寸計算：分別計算縮放以及位置的值

邏輯清晰沒問題，程式碼優化一下：

貼程式碼貼程式碼：

// 滾輪監聽
$(".upper-canvas").on('wheel', (e) => {
    if (e.originalEvent.deltaY > 0) {
        console.log('上', e.originalEvent.deltaY);
        this.calculateScale(this.canvas, this.scaleStep);
    } else {
        console.log('下', e.originalEvent.deltaY);
        
 
this.calculateScale(this.canvas, -this.scaleStep);
    }
});


    /**
     * 縮放畫布
     */
    calculateScale(canvas, num) {
        let scale;
        [ this.currentScale, scale ] = this.getScaleValue(this.currentScale, num);
        console.log(this.currentScale);
        this.canvas.setWidth(this.canvas.getWidth() * scale);
        this.canvas.setHeight(this.canvas.getHeight() * scale);
        // 計算包含物件的尺寸佈局
        this.calculateEleScale(canvas, scale);
        this.canvas.renderAll();
    }

    /**
     * 獲取縮放值與比例，增加限制最大最小
     */
    getScaleValue(currentScale, num) {
        let newScale = this.currentScale + num;
        // 處理計算精度瑕疵
        newScale = Number(newScale.toFixed(1));
        if (newScale < this.scaleMin || newScale > this.scaleMax) {
            // 越限直接返回當前比例
            return [ currentScale, 1 ];
        }
        // 處理比例關係
        return [ newScale, (this.currentScale + num) / this.currentScale ];
    }

    /**
     * 計算畫布包含物件的縮放
     */
    calculateEleScale(canvas, scale) {
        let objects = canvas.getObjects();
        for (let i in objects) {
            let map = [ 'scaleX', 'scaleY', 'left', 'top' ];
            map.map((attr) => {
                objects[i][attr] *= scale;
            });
        }
    }