import 'vue3-sketch-ruler/lib/style.css' components: SketchRule ``` ## 支持的功能 - [x] 标尺渲染 - [x] 缩放内容,重绘标尺 - [x] 滚动内容,重绘标尺 - [x] 切换标尺状态,显示或隐藏 - [x] 参考线管理(增加删除) WebContainers currently work in Chromium-based browsers, Firefox, and Safari 16.4. We’re hoping to add support for more browsers as ...
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需要时引入类型 import type { SketchRulerProps } from 'vue3-sketch-...
{ 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...
@@ -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...
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-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" 15 15 snap 16 + :scale-ratio="post.scale" 16 17...
<sketch-rule ref="sketchruleRef" v-bind="post"> <template #default> </template> <template #btn="{ reset, zoomIn, zoomOut }"> 还原 放大
标尺的阴影颜色还是不跟随变化 <SketchRule v-if="sketchRuleReDraw" ref="sketchruleRef" :key="rendIndex" :scale="scale" :width="canvasBox.width" :height="canvasBox.height" v-bind="post" :palette="rulerPalette" :panzoom-option="panzoomOption" style="height: calc(100% - 40px)" >...
import SketchRule from './sketchRuler/sketchRuler.vue' import { version } from '../package.json' export function install(app) { app.component(SketchRule.name, SketchRule) } const plugin = { version, install } export { SketchRule } export default plugin0...