npm install --save vue3-sketch-ruler yarn add vue3-sketch-ruler -S引入方式将打包后的dist包拷贝,用import导入,支持下面两种引用方式import SketchRule from 'vue3-sketch-ruler' import 'vue3-sketch-ruler/lib/style.css' // ts需要时引入类型 im
import 'vue3-sketch-ruler/lib/style.css' components: SketchRule ``` ## 支持的功能 - [x] 标尺渲染 - [x] 缩放内容,重绘标尺 - [x] 滚动内容,重绘标尺 - [x] 切换标尺状态,显示或隐藏 - [x] 参考线管理(增加删除) WebContainers currently work in Chromium-based browsers, Firefox, and Safari...
{ sketchRulerProps, SketchRulerProps } from './index-types' import getPalette from './mixin' export default defineComponent({ name: 'SketchRule', components: { RulerWrapper }, props: sketchRulerProps, emits: ['onCornerClick', 'handleLine'], setup(props: SketchRulerProps, { ...
import SketchRule from '../../src/index' // 这里可以换成打包后的 const rectWidth = 1200 const rectHeight = 600 const canvasWidth = 800 const canvasHeight = 400 const sketchrule = ref() // 另外一个方法调用内部方法 const zoomOutMethod2 = () => { @@ -56,8 +59,8 @@ const zoom...
52 + <SketchRule 53 + ref="sketchruleRef" 54 + :key="rendIndex" 55 + v-model:scale="state.scale" 56 + v-model:lockLine="lockLine" 57 + v-bind="post" 58 + :selfHandle="true" 59 + @on-corner-click="handleCornerClick" 60 + @zoomchange="zoomchange" 61 + > 62 + <template...
8 - <sketch-rule ref="sketchruleRef" v-bind="post"> 8 + <sketch-rule ref="sketchruleRef" v-model:scale="post.scale" v-bind="post"> 9 9 <template #default> 10 - 10 + 11 11 <Drager 12 12 v-for="item in data.componentList" 13 13 v-bind="item" 14 14 :key="item.id...
@@ -121,10 +121,10 @@ import 'vue3-sketch-ruler/lib/style.css' 121 121 import Vue from 'vue'; 122 122 import {SketchRule} from "vue-sketch-ruler"; 123 123 import 'vue3-sketch-ruler/lib/style.css' 124 - const rectWidth = 1200 125 - const rectHeight = 600 126 - cons...
const sketchruleRef = ref() const post = reactive({ thick: 20, width: 1470, height: 800, showShadowText: false, canvasWidth: 1000, canvasHeight: 500, showRuler: true, palette: { bgColor: 'transparent', lineType: 'dashed' }, isShowReferLine: true, shadow: { x: 0, y: 0, width:...
import type { App } from 'vue' import { GoSkeleton } from '@/components/GoSkeleton' import { GoLoading } from '@/components/GoLoading' import { SketchRule } from 'vue3-sketch-ruler' /** * 全局注册自定义组件 * @param app */ export function setupCustomComponents(app: App) { // ...
13 + <SketchRule 14 + ref="sketchruleRef" 15 + v-model:scale="state.scale" 16 + v-model:lockLine="lockLine" 17 + v-bind="post" 18 + :selfHandle="true" 19 + > 20 + <template #default> 21 + 22 + <movebleCom 23 + :scale="state.scale" 24 + v-model:shadow="post.shad...