当前位置：首页 > news >正文

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

news 2026/3/26 20:05:22

版本信息

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 = () => {
　　 //标尺的边框 pxconst borderWidth = 1
　　 //画布元素const workspaceEl = document.querySelector('#workspace') as HTMLElement;ruleOption.value.width = workspaceEl.offsetWidth - ruleOption.value.thick - borderWidthruleOption.value.height = workspaceEl.offsetHeight - ruleOption.value.thick - borderWidth}
//画布缩放标尺进行缩放
const handleEditorZoom = () => {const transform = props.editor!.canvas.viewportTransformruleOption.value.scale = transform[0]
　　 //减去标尺16px 缩放后的宽度ruleOption.value.startX = -(transform[4] / transform[0] - 16 / transform[0])ruleOption.value.startY = -(transform[5] / transform[3] - 16 / transform[0])props.editor!.updateDomComponents();console.log(transform)
}nextTick(() => {props.event.on(ZoomEvent.ZOOMING, handleEditorZoom);initRuler();
})</script>