1.0.1 • Published 6 months ago
Share package scale-ruler-vue3 A vue3 public component, an excellent assistant for building a low-code platform. It supports free movement and scaling of the canvas within the area, and includes ruler, positioning line and adsorption line functions.
中文
demo
Features vue3 components API Support typescript Supports shortcut key zoom(e.g. use ctrl + '+' and ctrl + '-' to zoom) , mouse zoom and touchpad dual finger pinch zoom Supports free movement and scroll bar movement Easy and fast access Installation Using Package Manager npm install scale-ruler-vue3 --save
or
yarn add scale-ruler-vue3
# or
pnpm add scale-ruler-vue3
# or
bun add scale-ruler-vue3Import in Browser unpkg <head>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/scale-ruler-vue3/lib/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/scale-ruler-vue3"></script>
</head>jsDelivr <head>
<!-- Import style -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/scale-ruler-vue3/lib/index.css"
/>
<!-- Import Vue 3 -->
<script src="//cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Import component library -->
<script src="//cdn.jsdelivr.net/npm/scale-ruler-vue3"></script>
</head>Quick Start <template>
<ScaleRuler
ref="scaleRulerRef"
v-model:scale="opt.scale"
:auto-scale="opt.autoScale"
:canvas-width="opt.canvasWidth"
:canvas-height="opt.canvasHeight"
:container-auto-size="true"
:canvas-style="opt.canvasStyle"
></ScaleRuler>
</template>
<script setup>
import {reactive} from 'vue';
import ScaleRuler from 'scale-ruler-vue3';
const opt = reactive({
canvasWidth: 1920,
canvasHeight: 1000,
autoScale: true,
scale: 1,
canvasStyle: {
backgroundColor: '#ccc'
}
});
</script>Reference code
Attributes Attribute Description Type Default Remark scale/v-model:model Scale ratio of canvas Number 1 If autoScale is true，The initial value of scale does not take effect minScale The minimum value of scale ratio of canvas Number 0.1 maxScale The maximum value of scale ratio of canvas Number 10 autoScale Whether to automatically calculate the scale ratio of canvas during initialization Boolean true canScale Whether scaling is allowed or not Boolean true autoCenter Whether to automatically center the canvas during initialization Boolean true containerAutoSize Whether to automatically calculate the width and height of the container Boolean true If true, it will monitor the changes of container width and height and repaint the canvas and ruler containerWidth Container width Number 1000 If containerAutoSize is true, this value does not take effect containerHeight Container height Number 500 If containerAutoSize is true, this value does not take effect containerXPadding The left and right padding between the container and the canvas in the x-direction/horizontal direction Number 800 containerYPadding The top and bottom padding between the container and the canvas in the y-direction/vertical direction Number 800 canvasWidth Canvas width Number 1920 canvasHeight Canvas height Number 1000 canvasStyle The style of canvas Object {} proxyScaleKey Whether to proxy the shortcut key zoom function or not Boolean true proxy ctrl+ "+" to zoom in and ctrl + "-" to zoom out useScrollBar Whether to use scrollbar Boolean true scrollBarConfig The config of scrollbar Object {} see scrollBarConfig params useRuler Whether to use ruler Boolean true rulerConfig The config of ruler Object {} see rulerConfig params usePositionLine Whether to use position line Boolean true positionLineConfig The config of position line Object {} see positionLineConfig params
scrollBarConfig params Attribute Description Type Default Remark bgColor background color String #000000 opacity opacity Number 0.4 zIndex zIndex Number 500 size The height of horizontal scrollbar and the width of vertical scrollbar Number 8
rulerConfig params Attribute Description Type Default Remark xRulerHeight The height of x/horizontal ruler Number 30 Do not bigger than the containerYPadding yRulerWidth The width of y/vertical ruler Number 30 Do not bigger than containerXPadding bgColor Background color of ruler String #efefef fontColor The color of number in ruler String #000000 fontSize The font size of number in ruler Number 12 fontFamily The font family of number in ruler String Arial lineColor The line color of ruler String #000000 zIndex zIndex Number 400
positionLineConfig params Attribute Description Type Default Remark lineColor The color of position line String #24aa61 padding The padding of operation Number 3 adsorptionXList The list of adsorption in x/horizontal direction Array 0, canvasWidth adsorptionYList The list of adsorption in y/vertical direction Array 0, canvasHeight adsorptionGap The gap to adsorb Number 4 zIndex zIndex Number 300 useRightKeyRemove Whether to enable right key delete the position line boolean true removeIcon The component of remove-icon Component If useRightKeyRemove is true, the value of removeIcon will effective;If removeIconis empty, the default component of icon will effective removeIconFillColor The fill-color of remove-icon string #525252
Events Methods Name Description Parameters onScale triggers when scaling the canvas scale: number onMove triggers when moving the canvas translateX: number, translateY: number adsorptionLineChange triggers when adsorption line(s) change(s) value: number[], isY: boolean positionLineChange triggers when position line(s) change(s) value: number[], isY: boolean
Methods Methods Name Description Parameters reset reset the canvas - changeScale change the scale ratio of canvas (scale:number) removeAllPositionLine remove all the position line(s) - showRuler show rulers - hideRuler hide rulers - showAllPositionLine show all the position line(s) - hideAllPositionLine hide all the position line(s) - addAdsorptionLine add adsorption line(s) (data: number | Array- the value of adsorption line, isY: boolean -Whether it is in the y/vertical direction) removeAdsorptionLine remove adsorption line(s) (data: number | Array- the value of adsorption line, isY: boolean -Whether it is in the y/vertical direction)