class Utils {
    // 一個(gè)物體通常是一堆點(diǎn)的集合
    static makeBoundingBoxFromPoints(points: Point[]) {
        const xPoints = points.map(point => point.x);
        const yPoints = points.map(point => point.y);
        const minX = Util.min(xPoints);
        const maxX = Util.max(xPoints);
        const minY = Util.min(yPoints);
        const maxY = Util.max(yPoints);
        const width = Math.abs(maxX - minX);
        const height = Math.abs(maxY - minY);
        return {
            left: minX,
            top: minY,
            width: width,
            height: height,
        };
    }
}

class FabricObject {
    render() {
        ...
        // 坐標(biāo)系變換
        this.transform(ctx);
        // 繪制物體
        this._render(ctx);
        // 如果是選中態(tài)
        if (this.active) {
            // 繪制物體邊框
            this.drawBorders(ctx);
            // 繪制物體四周的控制點(diǎn)，共⑨個(gè)
            this.drawControls(ctx);
        }
        ...
    }
}

class FabricObject {
    /** 繪制激活物體邊框 */
    drawBorders(ctx: CanvasRenderingContext2D): FabricObject {
        let padding = this.padding, // 邊框和物體的內(nèi)間距，也是個(gè)配置項(xiàng)，和 css 中的 padding 一個(gè)意思
            padding2 = padding * 2,
            strokeWidth = 1; // 邊框?qū)挾仁冀K是 1，不受縮放的影響，當(dāng)然可以做成配置項(xiàng)
        ctx.save();
        ctx.globalAlpha = this.isMoving ? 0.5 : 1; // 物體變換的時(shí)候使其透明度減半，提升用戶體驗(yàn)
        ctx.strokeStyle = this.borderColor;
        ctx.lineWidth = strokeWidth;
        /** 畫(huà)邊框的時(shí)候需要把 transform 變換中的 scale 效果抵消，這樣才能畫(huà)出原始大小的線條 */
        ctx.scale(1 / this.scaleX, 1 / this.scaleY);
        let w = this.getWidth(),
            h = this.getHeight();
        // 這里直接用原生的 api strokeRect 畫(huà)邊框即可，當(dāng)然要考慮到邊寬和內(nèi)間距的影響
        // 就是畫(huà)一個(gè)規(guī)規(guī)矩矩的矩形
        ctx.strokeRect(
            (-(w / 2) - padding - strokeWidth / 2),
            (-(h / 2) - padding - strokeWidth / 2),
            (w + padding2 + strokeWidth),
            (h + padding2 + strokeWidth)
        );
        // 除了畫(huà)邊框，還要畫(huà)旋轉(zhuǎn)控制點(diǎn)和邊框相連接的那條線
        if (this.hasRotatingPoint && this.hasControls) {
            let rotateHeight = (-h - strokeWidth - padding * 2) / 2;
            ctx.beginPath();
            ctx.moveTo(0, rotateHeight);
            ctx.lineTo(0, rotateHeight - this.rotatingPointOffset); // rotatingPointOffset 是旋轉(zhuǎn)控制點(diǎn)到邊框的距離
            ctx.closePath();
            ctx.stroke();
        }
        ctx.restore();
        return this;
    }
    /** 獲取當(dāng)前大小，包含縮放效果 */
    getWidth(): number {
        return this.width * this.scaleX;
    }
    /** 獲取當(dāng)前大小，包含縮放效果 */
    getHeight(): number {
        return this.height * this.scaleY;
    }
}

class FabricObject {
    /** 繪制控制點(diǎn) */
    drawControls(ctx: CanvasRenderingContext2D): FabricObject {
        if (!this.hasControls) return;
        // 因?yàn)楫?huà)布已經(jīng)經(jīng)過(guò)變換，所以大部分?jǐn)?shù)值需要除以 scale 來(lái)抵消變換
        // 而上面那種畫(huà)邊框的操作則是把坐標(biāo)系縮放回去，寫法不同，效果是一樣的
        let size = this.cornerSize,
            size2 = size / 2,
            strokeWidth2 = this.strokeWidth / 2,
            // top 和 left 值為物體左上角的點(diǎn)
            left = -(this.width / 2),
            top = -(this.height / 2),
            _left,
            _top,
            sizeX = size / this.scaleX,
            sizeY = size / this.scaleY,
            paddingX = this.padding / this.scaleX,
            paddingY = this.padding / this.scaleY,
            scaleOffsetY = size2 / this.scaleY,
            scaleOffsetX = size2 / this.scaleX,
            scaleOffsetSizeX = (size2 - size) / this.scaleX,
            scaleOffsetSizeY = (size2 - size) / this.scaleY,
            height = this.height,
            width = this.width,
        ctx.save();
        ctx.lineWidth = this.borderWidth / Math.max(this.scaleX, this.scaleY);
        ctx.globalAlpha = this.isMoving ? 0.5 : 1;
        ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
        // top-left 左上角的控制點(diǎn)，也要考慮到線寬和 padding 的影響
        _left = left - scaleOffsetX - strokeWidth2 - paddingX;
        _top = top - scaleOffsetY - strokeWidth2 - paddingY;
        ctx.clearRect(_left, _top, sizeX, sizeY);
        ctx.fillRect(_left, _top, sizeX, sizeY);
        // 其他八個(gè)點(diǎn)...
        ctx.restore();
        return this;
    }
}