fabricjs 整合 vue3-sketch-ruler 实现标尺功能

版本信息

fabricjs版本为6.7.1 ------  vue3-sketch-ruler的版本为1.3.15

引入标尺的部分代码

<!-- 画布区域 -->

  <div id="workspace" style="width: 100%;height: 100%; position: relative; background: #f1f1f1">
            <Ruler :editor="editor" :event="event"></Ruler>
            <canvas id="canvas" :class="state.ruler ? 'design-stage-grid' : ''"></canvas>
            <Dom v-if="state.show"></Dom>
            <ClickMenu v-if="state.show"></ClickMenu>
          </div>

  vue3-sketch-ruler标尺封装代码

<template>
    <SketchRule :thick="ruleOption.thick" :scale="ruleOption.scale" :width="ruleOption.width"
        :height="ruleOption.height" :shadow="ruleOption.shadow" :autoCenter="ruleOption.autoCenter"
        :start-x="ruleOption.startX" :start-y="ruleOption.startY" :palette="ruleOption.palette"
        :isShowReferLine="ruleOption.isShowReferLine" :lines="ruleOption.lines">
        <slot></slot>
    </SketchRule>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import SketchRule from 'vue3-sketch-ruler'
import 'vue3-sketch-ruler/lib/style.css'
import { ZoomEvent } from '@/enums/editorEnum';
import CanvasEventEmitter from '@/core/CanvasEventEmitter';
import Editor from '@/core';

const props = defineProps<{
    event: CanvasEventEmitter,
    editor: Editor | undefined
}>()

const ruleOption = ref({
    scale: 1, //初始化标尺的缩放 通过设置值，改变刻度尺的大小
    autoCenter: false, //缩放时是否自动居中对齐
    startX: 0, //水平标尺的起始刻度
    startY: 0, //垂直标尺的起始刻度    
    lines: { h: [], v: [], }, //不能直接写{}不然删除有问题
    shadow: {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
    },
    width: 0,
    height: 0,
    ratio: 1,
    thick: 16, //标尺的厚度 
    isShowRuler: true,
    isShowReferLine: true,
    palette: {
        bgColor: '#FFF', // 画布背景
        longfgColor: '#BABBBC', // 长刻度颜色
        shortfgColor: '#C8CDD0',
        fontColor: '#333', // 刻度文字颜色
        shadowColor: '#ccc', // 参考线颜色
        lineColor: '#33aaff',
        borderColor: '#DADADC',
        cornerActiveColor: 'rgba(255,255,255, 0)',
        lineType: 'solid'       // 参考线类型（solid/dashed/dotted）
    },
})

const initRuler = () => {
　　 //标尺的边框 px
    const borderWidth = 1
　　 //画布元素
    const workspaceEl = document.querySelector('#workspace') as HTMLElement;
    ruleOption.value.width = workspaceEl.offsetWidth - ruleOption.value.thick - borderWidth
    ruleOption.value.height = workspaceEl.offsetHeight - ruleOption.value.thick - borderWidth

}
//画布缩放标尺进行缩放
const handleEditorZoom = () => {
    const transform = props.editor!.canvas.viewportTransform
    ruleOption.value.scale = transform[0]
　　 //减去标尺16px 缩放后的宽度
    ruleOption.value.startX = -(transform[4] / transform[0] - 16 / transform[0])
    ruleOption.value.startY = -(transform[5] / transform[3] - 16 / transform[3])
    props.editor!.updateDomComponents();
    console.log(transform)
}

nextTick(() => {
    props.event.on(ZoomEvent.ZOOMING, handleEditorZoom);
    initRuler();
})

</script>