@hprint/plugins 0.0.1-alpha.3 → 0.0.1-alpha.4

package/src/utils/ruler/ruler.ts

@@ -1,924 +1,936 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { fabric, IEditor, Canvas, Point, IEvent } from '@hprint/core';
-import {
-    getGap,
-    mergeLines,
-    darwRect,
-    darwText,
-    darwLine,
-    drawMask,
-} from './utils';
-import { throttle } from 'lodash-es';
-import { setupGuideLine } from './guideline';
-import { LengthConvert } from '@hprint/shared';
-import { formatFixedString } from '../units';
-
-/**
- * 配置
- */
-export interface RulerOptions {
-    /**
-     * Canvas
-     */
-    canvas: Canvas;
-
-    /**
-     * Editor
-     */
-    editor: IEditor;
-
-    /**
-     * 单位（仅影响标尺文字展示）
-     * @default 'px'
-     */
-    unit?: 'px' | 'mm';
-
-    /**
-     * 标尺宽高
-     * @default 20
-     */
-    ruleSize?: number;
-
-    /**
-     * 字体大小
-     * @default 10
-     */
-    fontSize?: number;
-
-    /**
-     * 是否开启标尺
-     * @default false
-     */
-    enabled?: boolean;
-
-    /**
-     * 背景颜色
-     */
-    backgroundColor?: string;
-
-    /**
-     * 文字颜色
-     */
-    textColor?: string;
-
-    /**
-     * 边框颜色
-     */
-    borderColor?: string;
-
-    /**
-     * 高亮颜色
-     */
-    highlightColor?: string;
-}
-
-export type Rect = { left: number; top: number; width: number; height: number };
-
-export type HighlightRect = {
-    skip?: 'x' | 'y';
-    originXStart?: number;
-    originXEnd?: number;
-    originYStart?: number;
-    originYEnd?: number;
-} & Rect;
-
-class CanvasRuler {
-    protected ctx: CanvasRenderingContext2D;
-
-    /**
-     * 配置
-     */
-    public options: Required<RulerOptions>;
-
-    /**
-     * 当前单位
-     */
-    private unit: 'px' | 'mm' = 'px';
-
-    /**
-     * 标尺起始点
-     */
-    public startCalibration: undefined | Point;
-
-    private activeOn: 'down' | 'up' = 'up';
-
-    /**
-     * 选取对象矩形坐标
-     */
-    private objectRect:
-        | undefined
-        | {
-            x: HighlightRect[];
-            y: HighlightRect[];
-        };
-
-    /**
-     * 事件句柄缓存
-     */
-    private eventHandler: Record<string, (...args: any) => void> = {
-        // calcCalibration: this.calcCalibration.bind(this),
-        calcObjectRect: throttle(this.calcObjectRect.bind(this), 15),
-        markRectDirtyImmediate: (e?: IEvent<Event>) => {
-            this.currentMovingTarget = (e as any)?.target;
-            this.needsRectUpdate = true;
-            this.options.canvas.requestRenderAll();
-        },
-        markRectDirtyThrottled: throttle((e?: IEvent<Event>) => {
-            this.currentMovingTarget = (e as any)?.target;
-            this.needsRectUpdate = true;
-            this.options.canvas.requestRenderAll();
-        }, 30),
-        clearStatus: this.clearStatus.bind(this),
-        canvasMouseDown: this.canvasMouseDown.bind(this),
-        canvasMouseMove: throttle(this.canvasMouseMove.bind(this), 15),
-        canvasMouseUp: this.canvasMouseUp.bind(this),
-        render: (e: any) => {
-            // 避免多次渲染
-            if (!e.ctx) return;
-            this.render();
-        },
-    };
-
-    private lastAttr: {
-        status: 'out' | 'horizontal' | 'vertical';
-        cursor: string | undefined;
-        selection: boolean | undefined;
-    } = {
-            status: 'out',
-            cursor: undefined,
-            selection: undefined,
-        };
-
-    private tempGuidelLine: fabric.GuideLine | undefined;
-    private needsRectUpdate: boolean = true;
-    private currentMovingTarget: fabric.Object | undefined;
-
-    constructor(_options: RulerOptions) {
-        // 合并默认配置
-        this.options = Object.assign(
-            {
-                ruleSize: 20,
-                fontSize: 10,
-                enabled: false,
-                backgroundColor: '#fff',
-                borderColor: '#ddd',
-                highlightColor: '#007fff',
-                textColor: '#888',
-                unit: 'px',
-            },
-            _options
-        );
-
-        this.ctx = this.options.canvas.getContext();
-        this.unit = this.options.unit || 'px';
-
-        fabric.util.object.extend(this.options.canvas, {
-            ruler: this,
-        });
-
-        setupGuideLine();
-
-        if (this.options.enabled) {
-            this.enable();
-        }
-    }
-
-    // 设置单位
-    public setUnit(unit: 'px' | 'mm') {
-        if (this.unit === unit) return;
-        this.unit = unit;
-        this.render();
-    }
-
-    // 单位转换：像素 -> 显示单位数值
-    private formatValueByUnit(pxValue: number) {
-        if (this.unit === 'px') return pxValue;
-        return LengthConvert.pxToMm(pxValue);
-    }
-
-    private formatLabel(pxValue: number) {
-        const val = this.formatValueByUnit(pxValue);
-        // 为保持清晰，毫米保留 1 位小数
-        return this.unit === 'px'
-            ? String(Math.round(val))
-            : String(Math.round(val * 10) / 10);
-    }
-
-    // 销毁
-    public destroy() {
-        this.disable();
-    }
-
-    /**
-     * 移除全部辅助线
-     */
-    public clearGuideline() {
-        this.options.canvas.remove(
-            ...this.options.canvas.getObjects(fabric.GuideLine.prototype.type)
-        );
-    }
-
-    /**
-     * 显示全部辅助线
-     */
-    public showGuideline() {
-        this?.options?.canvas
-            ?.getObjects(fabric.GuideLine.prototype.type)
-            .forEach((guideLine) => {
-                guideLine.set('visible', true);
-            });
-        this?.options?.canvas?.renderAll();
-    }
-
-    /**
-     * 隐藏全部辅助线
-     */
-    public hideGuideline() {
-        this.options.canvas
-            .getObjects(fabric.GuideLine.prototype.type)
-            .forEach((guideLine) => {
-                guideLine.set('visible', false);
-            });
-        this.options.canvas.renderAll();
-    }
-
-    /**
-     * 启用
-     */
-    public enable() {
-        this.options.enabled = true;
-
-        // 绑定事件
-        this.options.canvas.on(
-            'after:render',
-            this.eventHandler.calcObjectRect
-        );
-        this.options.canvas.on('after:render', this.eventHandler.render);
-        this.options.canvas.on('mouse:down', this.eventHandler.canvasMouseDown);
-        this.options.canvas.on('mouse:move', this.eventHandler.canvasMouseMove);
-        this.options.canvas.on('mouse:up', this.eventHandler.canvasMouseUp);
-        this.options.canvas.on(
-            'selection:cleared',
-            this.eventHandler.clearStatus
-        );
-        this.options.canvas.on('object:added', this.eventHandler.markRectDirtyImmediate);
-        this.options.canvas.on('selection:created', this.eventHandler.markRectDirtyImmediate);
-        this.options.canvas.on('selection:updated', this.eventHandler.markRectDirtyImmediate);
-        this.options.canvas.on('object:moving', this.eventHandler.markRectDirtyThrottled);
-        this.options.canvas.on('object:modified', this.eventHandler.markRectDirtyImmediate);
-        this.options.canvas.on('object:scaling', this.eventHandler.markRectDirtyThrottled);
-        this.options.canvas.on('object:rotating', this.eventHandler.markRectDirtyThrottled);
-
-        // 显示辅助线
-        this.showGuideline();
-
-        // 绘制一次
-        this.render();
-    }
-
-    /**
-     * 禁用
-     */
-    public disable() {
-        // 解除事件
-        this.options.canvas.off(
-            'after:render',
-            this.eventHandler.calcObjectRect
-        );
-        this.options.canvas.off('after:render', this.eventHandler.render);
-        this.options.canvas.off(
-            'mouse:down',
-            this.eventHandler.canvasMouseDown
-        );
-        this.options.canvas.off(
-            'mouse:move',
-            this.eventHandler.canvasMouseMove
-        );
-        this.options.canvas.off('mouse:up', this.eventHandler.canvasMouseUp);
-        this.options.canvas.off(
-            'selection:cleared',
-            this.eventHandler.clearStatus
-        );
-        this.options.canvas.off('object:added', this.eventHandler.markRectDirtyImmediate);
-        this.options.canvas.off('selection:created', this.eventHandler.markRectDirtyImmediate);
-        this.options.canvas.off('selection:updated', this.eventHandler.markRectDirtyImmediate);
-        this.options.canvas.off('object:moving', this.eventHandler.markRectDirtyThrottled);
-        this.options.canvas.off('object:modified', this.eventHandler.markRectDirtyImmediate);
-        this.options.canvas.off('object:scaling', this.eventHandler.markRectDirtyThrottled);
-        this.options.canvas.off('object:rotating', this.eventHandler.markRectDirtyThrottled);
-
-        // 隐藏辅助线
-        this.hideGuideline();
-
-        this.options.enabled = false;
-    }
-
-    /**
-     * 绘制
-     */
-    public render() {
-        // if (!this.options.enabled) return;
-        const vpt = this.options.canvas.viewportTransform;
-        if (!vpt) return;
-        if (this.needsRectUpdate) {
-            if (this.currentMovingTarget) {
-                this.calcObjectRectFromTarget(this.currentMovingTarget);
-            } else {
-                this.calcObjectRect();
-            }
-            this.currentMovingTarget = undefined;
-            this.needsRectUpdate = false;
-        }
-        // 绘制尺子
-        this.draw({
-            isHorizontal: true,
-            rulerLength: this.getSize().width,
-            // startCalibration: -(vpt[4] / vpt[0]),
-            startCalibration: this.startCalibration?.x
-                ? this.startCalibration.x
-                : -(vpt[4] / vpt[0]),
-        });
-        this.draw({
-            isHorizontal: false,
-            rulerLength: this.getSize().height,
-            // startCalibration: -(vpt[5] / vpt[3]),
-            startCalibration: this.startCalibration?.y
-                ? this.startCalibration.y
-                : -(vpt[5] / vpt[3]),
-        });
-        // 绘制左上角的遮罩
-        drawMask(this.ctx, {
-            isHorizontal: true,
-            left: -10,
-            top: -10,
-            width: this.options.ruleSize * 2 + 10,
-            height: this.options.ruleSize + 10,
-            backgroundColor: this.options.backgroundColor,
-        });
-        drawMask(this.ctx, {
-            isHorizontal: false,
-            left: -10,
-            top: -10,
-            width: this.options.ruleSize + 10,
-            height: this.options.ruleSize * 2 + 10,
-            backgroundColor: this.options.backgroundColor,
-        });
-    }
-
-    /**
-     * 获取画板尺寸
-     */
-    private getSize() {
-        return {
-            width: this.options.canvas.width ?? 0,
-            height: this.options.canvas.height ?? 0,
-        };
-    }
-
-    private getZoom() {
-        return this.options.canvas.getZoom();
-    }
-
-    private draw(opt: {
-        isHorizontal: boolean;
-        rulerLength: number;
-        startCalibration: number;
-    }) {
-        const { isHorizontal, rulerLength, startCalibration } = opt;
-        const zoom = this.getZoom();
-
-        let gap = getGap(zoom);
-        let mmStep = 1;
-        if (this.unit === 'mm') {
-            const mmPx = LengthConvert.mmToPx(1, undefined, { direct: true });
-            const screenMm = mmPx * zoom;
-            if (screenMm < 4) mmStep = 10;
-            else if (screenMm < 8) mmStep = 5;
-            gap = mmPx * mmStep;
-        }
-        const unitLength = rulerLength / zoom;
-        const startValue =
-            Math[startCalibration > 0 ? 'floor' : 'ceil'](
-                startCalibration / gap
-            ) * gap;
-        const startOffset = startValue - startCalibration;
-
-        // 标尺背景
-        const canvasSize = this.getSize();
-        darwRect(this.ctx, {
-            left: 0,
-            top: 0,
-            width: isHorizontal ? canvasSize.width : this.options.ruleSize,
-            height: isHorizontal ? this.options.ruleSize : canvasSize.height,
-            fill: this.options.backgroundColor,
-            stroke: this.options.borderColor,
-        });
-
-        // 颜色
-        const textColor = new fabric.Color(this.options.textColor);
-        // 标尺文字显示
-        for (let i = 0; i + startOffset <= Math.ceil(unitLength); i += gap) {
-            const position = (startOffset + i) * zoom;
-            const textValue = this.formatLabel(startValue + i);
-            if (this.unit === 'mm') {
-                const mmVal = LengthConvert.pxToMm(startValue + i);
-                const mmRounded = Math.round(mmVal);
-                if (mmRounded % 5 !== 0) {
-                    continue;
-                }
-            }
-            const textLength = (10 * textValue.length) / 4;
-            const textX = isHorizontal
-                ? position - textLength - 1
-                : this.options.ruleSize / 2 - this.options.fontSize / 2 - 4;
-            const textY = isHorizontal
-                ? this.options.ruleSize / 2 - this.options.fontSize / 2 - 4
-                : position + textLength;
-            darwText(this.ctx, {
-                text: textValue,
-                left: textX,
-                top: textY,
-                fill: textColor.toRgb(),
-                angle: isHorizontal ? 0 : -90,
-            });
-        }
-
-        // 标尺刻度线显示
-        for (let j = 0; j + startOffset <= Math.ceil(unitLength); j += gap) {
-            const position = Math.round((startOffset + j) * zoom);
-            let lineSize = 8;
-            if (this.unit === 'mm') {
-                const mmVal = LengthConvert.pxToMm(startValue + j);
-                const mmRounded = Math.round(mmVal);
-                if (mmRounded % 10 === 0) lineSize = 12;
-                else if (mmRounded % 5 === 0) lineSize = 10;
-                else lineSize = 6;
-            }
-            const left = isHorizontal ? position : this.options.ruleSize - lineSize;
-            const top = isHorizontal ? this.options.ruleSize - lineSize : position;
-            const width = isHorizontal ? 0 : lineSize;
-            const height = isHorizontal ? lineSize : 0;
-            darwLine(this.ctx, {
-                left,
-                top,
-                width,
-                height,
-                stroke: textColor.toRgb(),
-            });
-        }
-
-        // 标尺蓝色遮罩
-        if (this.objectRect) {
-            const axis = isHorizontal ? 'x' : 'y';
-            this.objectRect[axis].forEach((rect) => {
-                // 跳过指定矩形
-                if (rect.skip === axis) {
-                    return;
-                }
-
-                // 获取数字的值
-                const getOriginValue = (type: 'start' | 'end') => {
-                    if (this.unit === 'px') {
-                        const value = this.options.editor.getSizeByUnit(
-                            (type === 'start'
-                                ? isHorizontal
-                                    ? rect.left
-                                    : rect.top
-                                : isHorizontal
-                                    ? rect.left + rect.width
-                                    : rect.top + rect.height) /
-                            zoom +
-                            startCalibration
-                        );
-                        const num = Number(value);
-                        if (Number.isNaN(num)) return undefined;
-                        return Math.round(num * 100) / 100;
-                    }
-                    if (isHorizontal) {
-                        return type === 'start' ? rect.originXStart : rect.originXEnd;
-                    } else {
-                        return type === 'start' ? rect.originYStart : rect.originYEnd;
-                    }
-                };
-
-                const leftTextVal = getOriginValue('start');
-                const rightTextVal = getOriginValue('end');
-                const precision = this.options.editor.getPrecision?.() ?? 2;
-                const leftTextStr =
-                    leftTextVal !== undefined ? formatFixedString(leftTextVal, precision) : undefined;
-                const rightTextStr =
-                    rightTextVal !== undefined ? formatFixedString(rightTextVal, precision) : undefined;
-
-                const isSameText =
-                    leftTextVal !== undefined &&
-                    rightTextVal !== undefined &&
-                    leftTextVal === rightTextVal;
-
-                // 背景遮罩
-                const maskOpt = {
-                    isHorizontal,
-                    width: isHorizontal ? 160 : this.options.ruleSize - 8,
-                    height: isHorizontal ? this.options.ruleSize - 8 : 160,
-                    backgroundColor: this.options.backgroundColor,
-                };
-                drawMask(this.ctx, {
-                    ...maskOpt,
-                    left: isHorizontal ? rect.left - 80 : 0,
-                    top: isHorizontal ? 0 : rect.top - 80,
-                });
-                if (!isSameText) {
-                    drawMask(this.ctx, {
-                        ...maskOpt,
-                        left: isHorizontal ? rect.width + rect.left - 80 : 0,
-                        top: isHorizontal ? 0 : rect.height + rect.top - 80,
-                    });
-                }
-
-                // 颜色
-                const highlightColor = new fabric.Color(
-                    this.options.highlightColor
-                );
-
-                // 高亮遮罩
-                highlightColor.setAlpha(0.5);
-                darwRect(this.ctx, {
-                    left: isHorizontal ? rect.left : this.options.ruleSize - 8,
-                    top: isHorizontal ? this.options.ruleSize - 8 : rect.top,
-                    width: isHorizontal ? rect.width : 8,
-                    height: isHorizontal ? 8 : rect.height,
-                    fill: highlightColor.toRgba(),
-                });
-
-                // 两边的数字
-                const pad =
-                    this.options.ruleSize / 2 - this.options.fontSize / 2 - 4;
-
-                const textOpt = {
-                    fill: highlightColor.toRgba(),
-                    angle: isHorizontal ? 0 : -90,
-                };
-
-                if (leftTextStr !== undefined) {
-                    darwText(this.ctx, {
-                        ...textOpt,
-                        text: leftTextStr,
-                        left: isHorizontal ? rect.left - 2 : pad,
-                        top: isHorizontal ? pad : rect.top - 2,
-                        align: isSameText
-                            ? 'center'
-                            : isHorizontal
-                                ? 'right'
-                                : 'left',
-                    });
-                }
-
-                if (!isSameText && rightTextStr !== undefined) {
-                    darwText(this.ctx, {
-                        ...textOpt,
-                        text: rightTextStr,
-                        left: isHorizontal ? rect.left + rect.width + 2 : pad,
-                        top: isHorizontal ? pad : rect.top + rect.height + 2,
-                        align: isHorizontal ? 'left' : 'right',
-                    });
-                }
-
-                // 两边的线
-                const lineSize = isSameText ? 8 : 14;
-
-                highlightColor.setAlpha(1);
-
-                const lineOpt = {
-                    width: isHorizontal ? 0 : lineSize,
-                    height: isHorizontal ? lineSize : 0,
-                    stroke: highlightColor.toRgba(),
-                };
-
-                darwLine(this.ctx, {
-                    ...lineOpt,
-                    left: isHorizontal
-                        ? rect.left
-                        : this.options.ruleSize - lineSize,
-                    top: isHorizontal
-                        ? this.options.ruleSize - lineSize
-                        : rect.top,
-                });
-
-                if (!isSameText) {
-                    darwLine(this.ctx, {
-                        ...lineOpt,
-                        left: isHorizontal
-                            ? rect.left + rect.width
-                            : this.options.ruleSize - lineSize,
-                        top: isHorizontal
-                            ? this.options.ruleSize - lineSize
-                            : rect.top + rect.height,
-                    });
-                }
-            });
-        }
-        // draw end
-    }
-
-    /**
-     * 计算起始点
-     */
-    // private calcCalibration() {
-    //   if (this.startCalibration) return;
-    //   // console.log('calcCalibration');
-    //   const workspace = this.options.canvas.getObjects().find((item: any) => {
-    //     return item.id === 'workspace';
-    //   });
-    //   if (!workspace) return;
-    //   const rect = workspace.getBoundingRect(false);
-    //   this.startCalibration = new fabric.Point(-rect.left, -rect.top).divide(this.getZoom());
-    // }
-
-    private calcObjectRect() {
-        const activeObjects = this.options.canvas.getActiveObjects();
-        if (activeObjects.length === 0) return;
-        const allRect = activeObjects.reduce((rects, obj) => {
-            const rect: HighlightRect = obj.getBoundingRect(false, true);
-            // 如果是分组单独计算坐标
-            if (obj.group) {
-                const baseGroup: any = obj.group;
-                const group = {
-                    ...baseGroup,
-                    scaleX: baseGroup?.scaleX ?? 1,
-                    scaleY: baseGroup?.scaleY ?? 1,
-                } as any;
-                // 计算矩形坐标
-                rect.width *= group.scaleX;
-                rect.height *= group.scaleY;
-                const groupCenterX = group.width / 2 + group.left;
-                const objectOffsetFromCenterX =
-                    (group.width / 2 + (obj.left ?? 0)) * (1 - group.scaleX);
-                rect.left +=
-                    (groupCenterX - objectOffsetFromCenterX) * this.getZoom();
-                const groupCenterY = group.height / 2 + group.top;
-                const objectOffsetFromCenterY =
-                    (group.height / 2 + (obj.top ?? 0)) * (1 - group.scaleY);
-                rect.top +=
-                    (groupCenterY - objectOffsetFromCenterY) * this.getZoom();
-            }
-            if (obj instanceof fabric.GuideLine) {
-                rect.skip = obj.isHorizontal() ? 'x' : 'y';
-            }
-            if (this.unit !== 'px') {
-                const origin = (obj as any)._originSize?.[this.unit];
-                if (origin) {
-                    if (obj instanceof fabric.Polygon && Array.isArray(origin.points)) {
-                        const xs = origin.points.map((p: any) => p.x);
-                        const ys = origin.points.map((p: any) => p.y);
-                        const minX = Math.min(...xs);
-                        const maxX = Math.max(...xs);
-                        const minY = Math.min(...ys);
-                        const maxY = Math.max(...ys);
-                        rect.originXStart = minX;
-                        rect.originXEnd = maxX;
-                        rect.originYStart = minY;
-                        rect.originYEnd = maxY;
-                    } else {
-                        const left = origin.left;
-                        const top = origin.top;
-                        let width = origin.width;
-                        let height = origin.height;
-                        if (width === undefined && origin.rx !== undefined) {
-                            width = origin.rx * 2;
-                        }
-                        if (height === undefined && origin.ry !== undefined) {
-                            height = origin.ry * 2;
-                        }
-                        if (left !== undefined && width !== undefined) {
-                            rect.originXStart = left;
-                            rect.originXEnd = left + width;
-                        }
-                        if (top !== undefined && height !== undefined) {
-                            rect.originYStart = top;
-                            rect.originYEnd = top + height;
-                        }
-                    }
-                }
-            }
-            rects.push(rect);
-            return rects;
-        }, [] as HighlightRect[]);
-        if (allRect.length === 0) return;
-        this.objectRect = {
-            x: mergeLines(allRect, true),
-            y: mergeLines(allRect, false),
-        };
-    }
-
-    private calcObjectRectFromTarget(target: fabric.Object) {
-        const getRectFromObj = (obj: fabric.Object): HighlightRect => {
-            const rect: HighlightRect = obj.getBoundingRect(false, true);
-            if ((obj as any).group) {
-                const baseGroup: any = (obj as any).group;
-                const group = {
-                    ...baseGroup,
-                    scaleX: baseGroup?.scaleX ?? 1,
-                    scaleY: baseGroup?.scaleY ?? 1,
-                } as any;
-                rect.width *= group.scaleX;
-                rect.height *= group.scaleY;
-                const groupCenterX = group.width / 2 + group.left;
-                const objectOffsetFromCenterX =
-                    (group.width / 2 + (obj.left ?? 0)) * (1 - group.scaleX);
-                rect.left +=
-                    (groupCenterX - objectOffsetFromCenterX) * this.getZoom();
-                const groupCenterY = group.height / 2 + group.top;
-                const objectOffsetFromCenterY =
-                    (group.height / 2 + (obj.top ?? 0)) * (1 - group.scaleY);
-                rect.top +=
-                    (groupCenterY - objectOffsetFromCenterY) * this.getZoom();
-            }
-            if ((obj as any) instanceof fabric.GuideLine) {
-                (rect as any).skip = (obj as any).isHorizontal() ? 'x' : 'y';
-            }
-            if (this.unit !== 'px') {
-                const origin = (obj as any)._originSize?.[this.unit];
-                if (origin) {
-                    if ((obj as any) instanceof fabric.Polygon && Array.isArray(origin.points)) {
-                        const xs = origin.points.map((p: any) => p.x);
-                        const ys = origin.points.map((p: any) => p.y);
-                        const minX = Math.min(...xs);
-                        const maxX = Math.max(...xs);
-                        const minY = Math.min(...ys);
-                        const maxY = Math.max(...ys);
-                        rect.originXStart = minX;
-                        rect.originXEnd = maxX;
-                        rect.originYStart = minY;
-                        rect.originYEnd = maxY;
-                    } else {
-                        const left = origin.left;
-                        const top = origin.top;
-                        let width = origin.width;
-                        let height = origin.height;
-                        if (width === undefined && origin.rx !== undefined) {
-                            width = origin.rx * 2;
-                        }
-                        if (height === undefined && origin.ry !== undefined) {
-                            height = origin.ry * 2;
-                        }
-                        if (left !== undefined && width !== undefined) {
-                            rect.originXStart = left;
-                            rect.originXEnd = left + width;
-                        }
-                        if (top !== undefined && height !== undefined) {
-                            rect.originYStart = top;
-                            rect.originYEnd = top + height;
-                        }
-                    }
-                }
-            }
-            return rect;
-        };
-
-        const rect = getRectFromObj(target);
-        this.objectRect = {
-            x: mergeLines([rect], true),
-            y: mergeLines([rect], false),
-        };
-    }
-
-    /**
-     * 清除起始点和矩形坐标
-     */
-    private clearStatus() {
-        // this.startCalibration = undefined;
-        this.objectRect = undefined;
-    }
-
-    /**
-    判断鼠标是否在标尺上
-   * @param point
-   * @returns "vertical" | "horizontal" | false
-   */
-    public isPointOnRuler(point: Point) {
-        if (
-            new fabric.Rect({
-                left: 0,
-                top: 0,
-                width: this.options.ruleSize,
-                height: this.options.canvas.height,
-            }).containsPoint(point)
-        ) {
-            return 'vertical';
-        } else if (
-            new fabric.Rect({
-                left: 0,
-                top: 0,
-                width: this.options.canvas.width,
-                height: this.options.ruleSize,
-            }).containsPoint(point)
-        ) {
-            return 'horizontal';
-        }
-        return false;
-    }
-
-    private canvasMouseDown(e: IEvent<MouseEvent>) {
-        if (!e.pointer || !e.absolutePointer) return;
-        const hoveredRuler = this.isPointOnRuler(e.pointer);
-        if (hoveredRuler && this.activeOn === 'up') {
-            // 备份属性
-            this.lastAttr.selection = this.options.canvas.selection;
-            this.options.canvas.selection = false;
-            this.activeOn = 'down';
-
-            this.tempGuidelLine = new fabric.GuideLine(
-                hoveredRuler === 'horizontal'
-                    ? e.absolutePointer.y
-                    : e.absolutePointer.x,
-                {
-                    axis: hoveredRuler,
-                    visible: false,
-                }
-            );
-
-            this.options.canvas.add(this.tempGuidelLine);
-            this.options.canvas.setActiveObject(this.tempGuidelLine);
-
-            this.options.canvas._setupCurrentTransform(
-                e.e,
-                this.tempGuidelLine,
-                true
-            );
-
-            this.tempGuidelLine.fire('down', this.getCommonEventInfo(e));
-        }
-    }
-
-    private getCommonEventInfo = (e: IEvent<MouseEvent>) => {
-        if (!this.tempGuidelLine || !e.absolutePointer) return;
-        return {
-            e: e.e,
-            transform: this.tempGuidelLine.get('transform'),
-            pointer: {
-                x: e.absolutePointer.x,
-                y: e.absolutePointer.y,
-            },
-            target: this.tempGuidelLine,
-        };
-    };
-
-    private canvasMouseMove(e: IEvent<MouseEvent>) {
-        if (!e.pointer) return;
-
-        if (this.tempGuidelLine && e.absolutePointer) {
-            const pos: Partial<fabric.IGuideLineOptions> = {};
-            if (this.tempGuidelLine.axis === 'horizontal') {
-                pos.top = e.absolutePointer.y;
-            } else {
-                pos.left = e.absolutePointer.x;
-            }
-            this.tempGuidelLine.set({ ...pos, visible: true });
-
-            this.options.canvas.requestRenderAll();
-
-            const event = this.getCommonEventInfo(e);
-            this.options.canvas.fire('object:moving', event);
-            this.tempGuidelLine.fire('moving', event);
-        }
-
-        const hoveredRuler = this.isPointOnRuler(e.pointer);
-        if (!hoveredRuler) {
-            // 鼠标从里面出去
-            if (this.lastAttr.status !== 'out') {
-                // 更改鼠标指针
-                this.options.canvas.defaultCursor = this.lastAttr.cursor;
-                this.lastAttr.status = 'out';
-            }
-            return;
-        }
-        // const activeObjects = this.options.canvas.getActiveObjects();
-        // if (activeObjects.length === 1 && activeObjects[0] instanceof fabric.GuideLine) {
-        //   return;
-        // }
-        // 鼠标从外边进入 或 在另一侧标尺
-        if (
-            this.lastAttr.status === 'out' ||
-            hoveredRuler !== this.lastAttr.status
-        ) {
-            // 更改鼠标指针
-            this.lastAttr.cursor = this.options.canvas.defaultCursor;
-            this.options.canvas.defaultCursor =
-                hoveredRuler === 'horizontal' ? 'ns-resize' : 'ew-resize';
-            this.lastAttr.status = hoveredRuler;
-        }
-    }
-
-    private canvasMouseUp(e: IEvent<MouseEvent>) {
-        if (this.activeOn !== 'down') return;
-
-        // 还原属性
-        this.options.canvas.selection = this.lastAttr.selection;
-        this.activeOn = 'up';
-
-        this.tempGuidelLine?.fire('up', this.getCommonEventInfo(e));
-
-        this.tempGuidelLine = undefined;
-    }
-}
-
-export default CanvasRuler;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fabric, IEditor, Canvas, Point, IEvent } from '@hprint/core';
+import {
+    getGap,
+    mergeLines,
+    darwRect,
+    darwText,
+    darwLine,
+    drawMask,
+} from './utils';
+import { throttle } from 'lodash-es';
+import { setupGuideLine } from './guideline';
+import { LengthConvert } from '@hprint/shared';
+import { formatFixedString } from '../units';
+
+/**
+ * 配置
+ */
+export interface RulerOptions {
+    /**
+     * Canvas
+     */
+    canvas: Canvas;
+
+    /**
+     * Editor
+     */
+    editor: IEditor;
+
+    /**
+     * 单位（仅影响标尺文字展示）
+     * @default 'px'
+     */
+    unit?: 'px' | 'mm';
+
+    /**
+     * 标尺宽高
+     * @default 20
+     */
+    ruleSize?: number;
+
+    /**
+     * 字体大小
+     * @default 10
+     */
+    fontSize?: number;
+
+    /**
+     * 是否开启标尺
+     * @default false
+     */
+    enabled?: boolean;
+
+    /**
+     * 背景颜色
+     */
+    backgroundColor?: string;
+
+    /**
+     * 文字颜色
+     */
+    textColor?: string;
+
+    /**
+     * 边框颜色
+     */
+    borderColor?: string;
+
+    /**
+     * 高亮颜色
+     */
+    highlightColor?: string;
+}
+
+export type Rect = { left: number; top: number; width: number; height: number };
+
+export type HighlightRect = {
+    skip?: 'x' | 'y';
+    originXStart?: number;
+    originXEnd?: number;
+    originYStart?: number;
+    originYEnd?: number;
+} & Rect;
+
+class CanvasRuler {
+    protected ctx: CanvasRenderingContext2D;
+
+    /**
+     * 配置
+     */
+    public options: Required<RulerOptions>;
+
+    /**
+     * 当前单位
+     */
+    private unit: 'px' | 'mm' = 'px';
+
+    /**
+     * 标尺起始点
+     */
+    public startCalibration: undefined | Point;
+
+    private activeOn: 'down' | 'up' = 'up';
+
+    /**
+     * 选取对象矩形坐标
+     */
+    private objectRect:
+        | undefined
+        | {
+            x: HighlightRect[];
+            y: HighlightRect[];
+        };
+
+    /**
+     * 事件句柄缓存
+     */
+    private eventHandler: Record<string, (...args: any) => void> = {
+        // calcCalibration: this.calcCalibration.bind(this),
+        calcObjectRect: throttle(this.calcObjectRect.bind(this), 15),
+        markRectDirtyImmediate: (e?: IEvent<Event>) => {
+            this.currentMovingTarget = (e as any)?.target;
+            this.needsRectUpdate = true;
+            this.options.canvas.requestRenderAll();
+        },
+        markRectDirtyThrottled: throttle((e?: IEvent<Event>) => {
+            this.currentMovingTarget = (e as any)?.target;
+            this.needsRectUpdate = true;
+            this.options.canvas.requestRenderAll();
+        }, 30),
+        clearStatus: this.clearStatus.bind(this),
+        canvasMouseDown: this.canvasMouseDown.bind(this),
+        canvasMouseMove: throttle(this.canvasMouseMove.bind(this), 15),
+        canvasMouseUp: this.canvasMouseUp.bind(this),
+        render: (e: any) => {
+            // 避免多次渲染
+            if (!e.ctx) return;
+            this.render();
+        },
+    };
+
+    private lastAttr: {
+        status: 'out' | 'horizontal' | 'vertical';
+        cursor: string | undefined;
+        selection: boolean | undefined;
+    } = {
+            status: 'out',
+            cursor: undefined,
+            selection: undefined,
+        };
+
+    private tempGuidelLine: fabric.GuideLine | undefined;
+    private needsRectUpdate: boolean = true;
+    private currentMovingTarget: fabric.Object | undefined;
+    private lastViewportTransform: number[] | undefined;
+
+    constructor(_options: RulerOptions) {
+        // 合并默认配置
+        this.options = Object.assign(
+            {
+                ruleSize: 20,
+                fontSize: 10,
+                enabled: false,
+                backgroundColor: '#fff',
+                borderColor: '#ddd',
+                highlightColor: '#007fff',
+                textColor: '#888',
+                unit: 'px',
+            },
+            _options
+        );
+
+        this.ctx = this.options.canvas.getContext();
+        this.unit = this.options.unit || 'px';
+
+        fabric.util.object.extend(this.options.canvas, {
+            ruler: this,
+        });
+
+        setupGuideLine();
+
+        if (this.options.enabled) {
+            this.enable();
+        }
+    }
+
+    // 设置单位
+    public setUnit(unit: 'px' | 'mm') {
+        if (this.unit === unit) return;
+        this.unit = unit;
+        this.render();
+    }
+
+    // 单位转换：像素 -> 显示单位数值
+    private formatValueByUnit(pxValue: number) {
+        if (this.unit === 'px') return pxValue;
+        return LengthConvert.pxToMm(pxValue);
+    }
+
+    private formatLabel(pxValue: number) {
+        const val = this.formatValueByUnit(pxValue);
+        // 为保持清晰，毫米保留 1 位小数
+        return this.unit === 'px'
+            ? String(Math.round(val))
+            : String(Math.round(val * 10) / 10);
+    }
+
+    // 销毁
+    public destroy() {
+        this.disable();
+    }
+
+    /**
+     * 移除全部辅助线
+     */
+    public clearGuideline() {
+        this.options.canvas.remove(
+            ...this.options.canvas.getObjects(fabric.GuideLine.prototype.type)
+        );
+    }
+
+    /**
+     * 显示全部辅助线
+     */
+    public showGuideline() {
+        this?.options?.canvas
+            ?.getObjects(fabric.GuideLine.prototype.type)
+            .forEach((guideLine) => {
+                guideLine.set('visible', true);
+            });
+        this?.options?.canvas?.renderAll();
+    }
+
+    /**
+     * 隐藏全部辅助线
+     */
+    public hideGuideline() {
+        this.options.canvas
+            .getObjects(fabric.GuideLine.prototype.type)
+            .forEach((guideLine) => {
+                guideLine.set('visible', false);
+            });
+        this.options.canvas.renderAll();
+    }
+
+    /**
+     * 启用
+     */
+    public enable() {
+        this.options.enabled = true;
+
+        // 绑定事件
+        this.options.canvas.on(
+            'after:render',
+            this.eventHandler.calcObjectRect
+        );
+        this.options.canvas.on('after:render', this.eventHandler.render);
+        this.options.canvas.on('mouse:down', this.eventHandler.canvasMouseDown);
+        this.options.canvas.on('mouse:move', this.eventHandler.canvasMouseMove);
+        this.options.canvas.on('mouse:up', this.eventHandler.canvasMouseUp);
+        this.options.canvas.on(
+            'selection:cleared',
+            this.eventHandler.clearStatus
+        );
+        // 标尺组件在初始化后似乎高亮了最后一个元素的尺寸，目前不需要这个行为
+        // this.options.canvas.on('object:added', this.eventHandler.markRectDirtyImmediate);
+        this.options.canvas.on('selection:created', this.eventHandler.markRectDirtyImmediate);
+        this.options.canvas.on('selection:updated', this.eventHandler.markRectDirtyImmediate);
+        this.options.canvas.on('object:moving', this.eventHandler.markRectDirtyThrottled);
+        this.options.canvas.on('object:modified', this.eventHandler.markRectDirtyImmediate);
+        this.options.canvas.on('object:scaling', this.eventHandler.markRectDirtyThrottled);
+        this.options.canvas.on('object:rotating', this.eventHandler.markRectDirtyThrottled);
+
+        // 显示辅助线
+        this.showGuideline();
+
+        // 绘制一次
+        this.render();
+    }
+
+    /**
+     * 禁用
+     */
+    public disable() {
+        // 解除事件
+        this.options.canvas.off(
+            'after:render',
+            this.eventHandler.calcObjectRect
+        );
+        this.options.canvas.off('after:render', this.eventHandler.render);
+        this.options.canvas.off(
+            'mouse:down',
+            this.eventHandler.canvasMouseDown
+        );
+        this.options.canvas.off(
+            'mouse:move',
+            this.eventHandler.canvasMouseMove
+        );
+        this.options.canvas.off('mouse:up', this.eventHandler.canvasMouseUp);
+        this.options.canvas.off(
+            'selection:cleared',
+            this.eventHandler.clearStatus
+        );
+        this.options.canvas.off('object:added', this.eventHandler.markRectDirtyImmediate);
+        this.options.canvas.off('selection:created', this.eventHandler.markRectDirtyImmediate);
+        this.options.canvas.off('selection:updated', this.eventHandler.markRectDirtyImmediate);
+        this.options.canvas.off('object:moving', this.eventHandler.markRectDirtyThrottled);
+        this.options.canvas.off('object:modified', this.eventHandler.markRectDirtyImmediate);
+        this.options.canvas.off('object:scaling', this.eventHandler.markRectDirtyThrottled);
+        this.options.canvas.off('object:rotating', this.eventHandler.markRectDirtyThrottled);
+
+        // 隐藏辅助线
+        this.hideGuideline();
+
+        this.options.enabled = false;
+    }
+
+    /**
+     * 绘制
+     */
+    public render() {
+        // if (!this.options.enabled) return;
+        const vpt = this.options.canvas.viewportTransform;
+        if (!vpt) return;
+
+        // 检查视口是否变化（缩放/平移）
+        if (
+            !this.lastViewportTransform ||
+            this.lastViewportTransform.some((val, index) => val !== vpt[index])
+        ) {
+            this.needsRectUpdate = true;
+            this.lastViewportTransform = [...vpt];
+        }
+
+        if (this.needsRectUpdate) {
+            if (this.currentMovingTarget) {
+                this.calcObjectRectFromTarget(this.currentMovingTarget);
+            } else {
+                this.calcObjectRect();
+            }
+            this.currentMovingTarget = undefined;
+            this.needsRectUpdate = false;
+        }
+        // 绘制尺子
+        this.draw({
+            isHorizontal: true,
+            rulerLength: this.getSize().width,
+            // startCalibration: -(vpt[4] / vpt[0]),
+            startCalibration: this.startCalibration?.x
+                ? this.startCalibration.x
+                : -(vpt[4] / vpt[0]),
+        });
+        this.draw({
+            isHorizontal: false,
+            rulerLength: this.getSize().height,
+            // startCalibration: -(vpt[5] / vpt[3]),
+            startCalibration: this.startCalibration?.y
+                ? this.startCalibration.y
+                : -(vpt[5] / vpt[3]),
+        });
+        // 绘制左上角的遮罩
+        drawMask(this.ctx, {
+            isHorizontal: true,
+            left: -10,
+            top: -10,
+            width: this.options.ruleSize * 2 + 10,
+            height: this.options.ruleSize + 10,
+            backgroundColor: this.options.backgroundColor,
+        });
+        drawMask(this.ctx, {
+            isHorizontal: false,
+            left: -10,
+            top: -10,
+            width: this.options.ruleSize + 10,
+            height: this.options.ruleSize * 2 + 10,
+            backgroundColor: this.options.backgroundColor,
+        });
+    }
+
+    /**
+     * 获取画板尺寸
+     */
+    private getSize() {
+        return {
+            width: this.options.canvas.width ?? 0,
+            height: this.options.canvas.height ?? 0,
+        };
+    }
+
+    private getZoom() {
+        return this.options.canvas.getZoom();
+    }
+
+    private draw(opt: {
+        isHorizontal: boolean;
+        rulerLength: number;
+        startCalibration: number;
+    }) {
+        const { isHorizontal, rulerLength, startCalibration } = opt;
+        const zoom = this.getZoom();
+
+        let gap = getGap(zoom);
+        let mmStep = 1;
+        if (this.unit === 'mm') {
+            const mmPx = LengthConvert.mmToPx(1, undefined, { direct: true });
+            const screenMm = mmPx * zoom;
+            if (screenMm < 4) mmStep = 10;
+            else if (screenMm < 8) mmStep = 5;
+            gap = mmPx * mmStep;
+        }
+        const unitLength = rulerLength / zoom;
+        const startValue =
+            Math[startCalibration > 0 ? 'floor' : 'ceil'](
+                startCalibration / gap
+            ) * gap;
+        const startOffset = startValue - startCalibration;
+
+        // 标尺背景
+        const canvasSize = this.getSize();
+        darwRect(this.ctx, {
+            left: 0,
+            top: 0,
+            width: isHorizontal ? canvasSize.width : this.options.ruleSize,
+            height: isHorizontal ? this.options.ruleSize : canvasSize.height,
+            fill: this.options.backgroundColor,
+            stroke: this.options.borderColor,
+        });
+
+        // 颜色
+        const textColor = new fabric.Color(this.options.textColor);
+        // 标尺文字显示
+        for (let i = 0; i + startOffset <= Math.ceil(unitLength); i += gap) {
+            const position = (startOffset + i) * zoom;
+            const textValue = this.formatLabel(startValue + i);
+            if (this.unit === 'mm') {
+                const mmVal = LengthConvert.pxToMm(startValue + i);
+                const mmRounded = Math.round(mmVal);
+                if (mmRounded % 5 !== 0) {
+                    continue;
+                }
+            }
+            const textLength = (10 * textValue.length) / 4;
+            const textX = isHorizontal
+                ? position - textLength - 1
+                : this.options.ruleSize / 2 - this.options.fontSize / 2 - 4;
+            const textY = isHorizontal
+                ? this.options.ruleSize / 2 - this.options.fontSize / 2 - 4
+                : position + textLength;
+            darwText(this.ctx, {
+                text: textValue,
+                left: textX,
+                top: textY,
+                fill: textColor.toRgb(),
+                angle: isHorizontal ? 0 : -90,
+            });
+        }
+
+        // 标尺刻度线显示
+        for (let j = 0; j + startOffset <= Math.ceil(unitLength); j += gap) {
+            const position = Math.round((startOffset + j) * zoom);
+            let lineSize = 8;
+            if (this.unit === 'mm') {
+                const mmVal = LengthConvert.pxToMm(startValue + j);
+                const mmRounded = Math.round(mmVal);
+                if (mmRounded % 10 === 0) lineSize = 12;
+                else if (mmRounded % 5 === 0) lineSize = 10;
+                else lineSize = 6;
+            }
+            const left = isHorizontal ? position : this.options.ruleSize - lineSize;
+            const top = isHorizontal ? this.options.ruleSize - lineSize : position;
+            const width = isHorizontal ? 0 : lineSize;
+            const height = isHorizontal ? lineSize : 0;
+            darwLine(this.ctx, {
+                left,
+                top,
+                width,
+                height,
+                stroke: textColor.toRgb(),
+            });
+        }
+
+        // 标尺蓝色遮罩
+        if (this.objectRect) {
+            const axis = isHorizontal ? 'x' : 'y';
+            this.objectRect[axis].forEach((rect) => {
+                // 跳过指定矩形
+                if (rect.skip === axis) {
+                    return;
+                }
+
+                // 获取数字的值
+                const getOriginValue = (type: 'start' | 'end') => {
+                    if (this.unit === 'px') {
+                        const value = this.options.editor.getSizeByUnit(
+                            (type === 'start'
+                                ? isHorizontal
+                                    ? rect.left
+                                    : rect.top
+                                : isHorizontal
+                                    ? rect.left + rect.width
+                                    : rect.top + rect.height) /
+                            zoom +
+                            startCalibration
+                        );
+                        const num = Number(value);
+                        if (Number.isNaN(num)) return undefined;
+                        return Math.round(num * 100) / 100;
+                    }
+                    if (isHorizontal) {
+                        return type === 'start' ? rect.originXStart : rect.originXEnd;
+                    } else {
+                        return type === 'start' ? rect.originYStart : rect.originYEnd;
+                    }
+                };
+
+                const leftTextVal = getOriginValue('start');
+                const rightTextVal = getOriginValue('end');
+                const precision = this.options.editor.getPrecision?.() ?? 2;
+                const leftTextStr =
+                    leftTextVal !== undefined ? formatFixedString(leftTextVal, precision) : undefined;
+                const rightTextStr =
+                    rightTextVal !== undefined ? formatFixedString(rightTextVal, precision) : undefined;
+
+                const isSameText =
+                    leftTextVal !== undefined &&
+                    rightTextVal !== undefined &&
+                    leftTextVal === rightTextVal;
+
+                // 背景遮罩
+                const maskOpt = {
+                    isHorizontal,
+                    width: isHorizontal ? 160 : this.options.ruleSize - 8,
+                    height: isHorizontal ? this.options.ruleSize - 8 : 160,
+                    backgroundColor: this.options.backgroundColor,
+                };
+                drawMask(this.ctx, {
+                    ...maskOpt,
+                    left: isHorizontal ? rect.left - 80 : 0,
+                    top: isHorizontal ? 0 : rect.top - 80,
+                });
+                if (!isSameText) {
+                    drawMask(this.ctx, {
+                        ...maskOpt,
+                        left: isHorizontal ? rect.width + rect.left - 80 : 0,
+                        top: isHorizontal ? 0 : rect.height + rect.top - 80,
+                    });
+                }
+
+                // 颜色
+                const highlightColor = new fabric.Color(
+                    this.options.highlightColor
+                );
+
+                // 高亮遮罩
+                highlightColor.setAlpha(0.5);
+                darwRect(this.ctx, {
+                    left: isHorizontal ? rect.left : this.options.ruleSize - 8,
+                    top: isHorizontal ? this.options.ruleSize - 8 : rect.top,
+                    width: isHorizontal ? rect.width : 8,
+                    height: isHorizontal ? 8 : rect.height,
+                    fill: highlightColor.toRgba(),
+                });
+
+                // 两边的数字
+                const pad =
+                    this.options.ruleSize / 2 - this.options.fontSize / 2 - 4;
+
+                const textOpt = {
+                    fill: highlightColor.toRgba(),
+                    angle: isHorizontal ? 0 : -90,
+                };
+
+                if (leftTextStr !== undefined) {
+                    darwText(this.ctx, {
+                        ...textOpt,
+                        text: leftTextStr,
+                        left: isHorizontal ? rect.left - 2 : pad,
+                        top: isHorizontal ? pad : rect.top - 2,
+                        align: isSameText
+                            ? 'center'
+                            : isHorizontal
+                                ? 'right'
+                                : 'left',
+                    });
+                }
+
+                if (!isSameText && rightTextStr !== undefined) {
+                    darwText(this.ctx, {
+                        ...textOpt,
+                        text: rightTextStr,
+                        left: isHorizontal ? rect.left + rect.width + 2 : pad,
+                        top: isHorizontal ? pad : rect.top + rect.height + 2,
+                        align: isHorizontal ? 'left' : 'right',
+                    });
+                }
+
+                // 两边的线
+                const lineSize = isSameText ? 8 : 14;
+
+                highlightColor.setAlpha(1);
+
+                const lineOpt = {
+                    width: isHorizontal ? 0 : lineSize,
+                    height: isHorizontal ? lineSize : 0,
+                    stroke: highlightColor.toRgba(),
+                };
+
+                darwLine(this.ctx, {
+                    ...lineOpt,
+                    left: isHorizontal
+                        ? rect.left
+                        : this.options.ruleSize - lineSize,
+                    top: isHorizontal
+                        ? this.options.ruleSize - lineSize
+                        : rect.top,
+                });
+
+                if (!isSameText) {
+                    darwLine(this.ctx, {
+                        ...lineOpt,
+                        left: isHorizontal
+                            ? rect.left + rect.width
+                            : this.options.ruleSize - lineSize,
+                        top: isHorizontal
+                            ? this.options.ruleSize - lineSize
+                            : rect.top + rect.height,
+                    });
+                }
+            });
+        }
+        // draw end
+    }
+
+    /**
+     * 计算起始点
+     */
+    // private calcCalibration() {
+    //   if (this.startCalibration) return;
+    //   // console.log('calcCalibration');
+    //   const workspace = this.options.canvas.getObjects().find((item: any) => {
+    //     return item.id === 'workspace';
+    //   });
+    //   if (!workspace) return;
+    //   const rect = workspace.getBoundingRect(false);
+    //   this.startCalibration = new fabric.Point(-rect.left, -rect.top).divide(this.getZoom());
+    // }
+
+    private calcObjectRect() {
+        const activeObjects = this.options.canvas.getActiveObjects();
+        if (activeObjects.length === 0) return;
+        const allRect = activeObjects.reduce((rects, obj) => {
+            const rect: HighlightRect = obj.getBoundingRect(false, true);
+            // 如果是分组单独计算坐标
+            if (obj.group) {
+                const baseGroup: any = obj.group;
+                const group = {
+                    ...baseGroup,
+                    scaleX: baseGroup?.scaleX ?? 1,
+                    scaleY: baseGroup?.scaleY ?? 1,
+                } as any;
+                // 计算矩形坐标
+                rect.width *= group.scaleX;
+                rect.height *= group.scaleY;
+                const groupCenterX = group.width / 2 + group.left;
+                const objectOffsetFromCenterX =
+                    (group.width / 2 + (obj.left ?? 0)) * (1 - group.scaleX);
+                rect.left +=
+                    (groupCenterX - objectOffsetFromCenterX) * this.getZoom();
+                const groupCenterY = group.height / 2 + group.top;
+                const objectOffsetFromCenterY =
+                    (group.height / 2 + (obj.top ?? 0)) * (1 - group.scaleY);
+                rect.top +=
+                    (groupCenterY - objectOffsetFromCenterY) * this.getZoom();
+            }
+            if (obj instanceof fabric.GuideLine) {
+                rect.skip = obj.isHorizontal() ? 'x' : 'y';
+            }
+            if (this.unit !== 'px') {
+                const origin = (obj as any)._originSize?.[this.unit];
+                if (origin) {
+                    if (obj instanceof fabric.Polygon && Array.isArray(origin.points)) {
+                        const xs = origin.points.map((p: any) => p.x);
+                        const ys = origin.points.map((p: any) => p.y);
+                        const minX = Math.min(...xs);
+                        const maxX = Math.max(...xs);
+                        const minY = Math.min(...ys);
+                        const maxY = Math.max(...ys);
+                        rect.originXStart = minX;
+                        rect.originXEnd = maxX;
+                        rect.originYStart = minY;
+                        rect.originYEnd = maxY;
+                    } else {
+                        const left = origin.left;
+                        const top = origin.top;
+                        let width = origin.width;
+                        let height = origin.height;
+                        if (width === undefined && origin.rx !== undefined) {
+                            width = origin.rx * 2;
+                        }
+                        if (height === undefined && origin.ry !== undefined) {
+                            height = origin.ry * 2;
+                        }
+                        if (left !== undefined && width !== undefined) {
+                            rect.originXStart = left;
+                            rect.originXEnd = left + width;
+                        }
+                        if (top !== undefined && height !== undefined) {
+                            rect.originYStart = top;
+                            rect.originYEnd = top + height;
+                        }
+                    }
+                }
+            }
+            rects.push(rect);
+            return rects;
+        }, [] as HighlightRect[]);
+        if (allRect.length === 0) return;
+        this.objectRect = {
+            x: mergeLines(allRect, true),
+            y: mergeLines(allRect, false),
+        };
+    }
+
+    private calcObjectRectFromTarget(target: fabric.Object) {
+        const getRectFromObj = (obj: fabric.Object): HighlightRect => {
+            const rect: HighlightRect = obj.getBoundingRect(false, true);
+            if ((obj as any).group) {
+                const baseGroup: any = (obj as any).group;
+                const group = {
+                    ...baseGroup,
+                    scaleX: baseGroup?.scaleX ?? 1,
+                    scaleY: baseGroup?.scaleY ?? 1,
+                } as any;
+                rect.width *= group.scaleX;
+                rect.height *= group.scaleY;
+                const groupCenterX = group.width / 2 + group.left;
+                const objectOffsetFromCenterX =
+                    (group.width / 2 + (obj.left ?? 0)) * (1 - group.scaleX);
+                rect.left +=
+                    (groupCenterX - objectOffsetFromCenterX) * this.getZoom();
+                const groupCenterY = group.height / 2 + group.top;
+                const objectOffsetFromCenterY =
+                    (group.height / 2 + (obj.top ?? 0)) * (1 - group.scaleY);
+                rect.top +=
+                    (groupCenterY - objectOffsetFromCenterY) * this.getZoom();
+            }
+            if ((obj as any) instanceof fabric.GuideLine) {
+                (rect as any).skip = (obj as any).isHorizontal() ? 'x' : 'y';
+            }
+            if (this.unit !== 'px') {
+                const origin = (obj as any)._originSize?.[this.unit];
+                if (origin) {
+                    if ((obj as any) instanceof fabric.Polygon && Array.isArray(origin.points)) {
+                        const xs = origin.points.map((p: any) => p.x);
+                        const ys = origin.points.map((p: any) => p.y);
+                        const minX = Math.min(...xs);
+                        const maxX = Math.max(...xs);
+                        const minY = Math.min(...ys);
+                        const maxY = Math.max(...ys);
+                        rect.originXStart = minX;
+                        rect.originXEnd = maxX;
+                        rect.originYStart = minY;
+                        rect.originYEnd = maxY;
+                    } else {
+                        const left = origin.left;
+                        const top = origin.top;
+                        let width = origin.width;
+                        let height = origin.height;
+                        if (width === undefined && origin.rx !== undefined) {
+                            width = origin.rx * 2;
+                        }
+                        if (height === undefined && origin.ry !== undefined) {
+                            height = origin.ry * 2;
+                        }
+                        if (left !== undefined && width !== undefined) {
+                            rect.originXStart = left;
+                            rect.originXEnd = left + width;
+                        }
+                        if (top !== undefined && height !== undefined) {
+                            rect.originYStart = top;
+                            rect.originYEnd = top + height;
+                        }
+                    }
+                }
+            }
+            return rect;
+        };
+
+        const rect = getRectFromObj(target);
+        this.objectRect = {
+            x: mergeLines([rect], true),
+            y: mergeLines([rect], false),
+        };
+    }
+
+    /**
+     * 清除起始点和矩形坐标
+     */
+    private clearStatus() {
+        // this.startCalibration = undefined;
+        this.objectRect = undefined;
+    }
+
+    /**
+    判断鼠标是否在标尺上
+   * @param point
+   * @returns "vertical" | "horizontal" | false
+   */
+    public isPointOnRuler(point: Point) {
+        if (
+            new fabric.Rect({
+                left: 0,
+                top: 0,
+                width: this.options.ruleSize,
+                height: this.options.canvas.height,
+            }).containsPoint(point)
+        ) {
+            return 'vertical';
+        } else if (
+            new fabric.Rect({
+                left: 0,
+                top: 0,
+                width: this.options.canvas.width,
+                height: this.options.ruleSize,
+            }).containsPoint(point)
+        ) {
+            return 'horizontal';
+        }
+        return false;
+    }
+
+    private canvasMouseDown(e: IEvent<MouseEvent>) {
+        if (!e.pointer || !e.absolutePointer) return;
+        const hoveredRuler = this.isPointOnRuler(e.pointer);
+        if (hoveredRuler && this.activeOn === 'up') {
+            // 备份属性
+            this.lastAttr.selection = this.options.canvas.selection;
+            this.options.canvas.selection = false;
+            this.activeOn = 'down';
+
+            this.tempGuidelLine = new fabric.GuideLine(
+                hoveredRuler === 'horizontal'
+                    ? e.absolutePointer.y
+                    : e.absolutePointer.x,
+                {
+                    axis: hoveredRuler,
+                    visible: false,
+                }
+            );
+
+            this.options.canvas.add(this.tempGuidelLine);
+            this.options.canvas.setActiveObject(this.tempGuidelLine);
+
+            this.options.canvas._setupCurrentTransform(
+                e.e,
+                this.tempGuidelLine,
+                true
+            );
+
+            this.tempGuidelLine.fire('down', this.getCommonEventInfo(e));
+        }
+    }
+
+    private getCommonEventInfo = (e: IEvent<MouseEvent>) => {
+        if (!this.tempGuidelLine || !e.absolutePointer) return;
+        return {
+            e: e.e,
+            transform: this.tempGuidelLine.get('transform'),
+            pointer: {
+                x: e.absolutePointer.x,
+                y: e.absolutePointer.y,
+            },
+            target: this.tempGuidelLine,
+        };
+    };
+
+    private canvasMouseMove(e: IEvent<MouseEvent>) {
+        if (!e.pointer) return;
+
+        if (this.tempGuidelLine && e.absolutePointer) {
+            const pos: Partial<fabric.IGuideLineOptions> = {};
+            if (this.tempGuidelLine.axis === 'horizontal') {
+                pos.top = e.absolutePointer.y;
+            } else {
+                pos.left = e.absolutePointer.x;
+            }
+            this.tempGuidelLine.set({ ...pos, visible: true });
+
+            this.options.canvas.requestRenderAll();
+
+            const event = this.getCommonEventInfo(e);
+            this.options.canvas.fire('object:moving', event);
+            this.tempGuidelLine.fire('moving', event);
+        }
+
+        const hoveredRuler = this.isPointOnRuler(e.pointer);
+        if (!hoveredRuler) {
+            // 鼠标从里面出去
+            if (this.lastAttr.status !== 'out') {
+                // 更改鼠标指针
+                this.options.canvas.defaultCursor = this.lastAttr.cursor;
+                this.lastAttr.status = 'out';
+            }
+            return;
+        }
+        // const activeObjects = this.options.canvas.getActiveObjects();
+        // if (activeObjects.length === 1 && activeObjects[0] instanceof fabric.GuideLine) {
+        //   return;
+        // }
+        // 鼠标从外边进入 或 在另一侧标尺
+        if (
+            this.lastAttr.status === 'out' ||
+            hoveredRuler !== this.lastAttr.status
+        ) {
+            // 更改鼠标指针
+            this.lastAttr.cursor = this.options.canvas.defaultCursor;
+            this.options.canvas.defaultCursor =
+                hoveredRuler === 'horizontal' ? 'ns-resize' : 'ew-resize';
+            this.lastAttr.status = hoveredRuler;
+        }
+    }
+
+    private canvasMouseUp(e: IEvent<MouseEvent>) {
+        if (this.activeOn !== 'down') return;
+
+        // 还原属性
+        this.options.canvas.selection = this.lastAttr.selection;
+        this.activeOn = 'up';
+
+        this.tempGuidelLine?.fire('up', this.getCommonEventInfo(e));
+
+        this.tempGuidelLine = undefined;
+    }
+}
+
+export default CanvasRuler;