@lhy-component/canvas-ruler

canvas-ruler

一个基于vue3的canvas标尺组件.

功能

• 支持横向/竖向

• 支持指定origin点位置缩放

• 支持多主题配置

安装

pnpm add @lhy-component/canvas-ruler

或

npm install -S @lhy-component/canvas-ruler

或

yarn add @lhy-component/canvas-ruler

使用

局部引用

import '@lhy-component/canvas-ruler/dist/style.css'
import { CanvasRuler } from '@lhy-component/canvas-ruler'

// vue组件上
components: { CanvasRuler },

全局引用

import '@lhy-component/canvas-ruler/dist/style.css'
import \* as CanvasRuler from '@lhy-component/canvas-ruler'

app.use(CanvasRuler)

组件调用

<div class="container">
  <CanvasRuler />
  <CanvasRuler direction="vertical" />
</div>

样式

--canvas-ruler-border-color: 标尺边框颜色

--canvas-ruler-size: 标尺宽度/高度，默认会自动计算：coordinateLineWidth[2] + 6 + 'px'

更多主题颜色通过themeOption配置项传入

组件配置

属性	描述	类型	默认值
modelValue	原点坐标值，原点位置由originValue决定	Number	0
direction	方向。horizonal-横向；vertical-竖向	String	horizonal
scale	基于原点位置缩放。范围[0, 10]	Number	1
originValue	原点位置值，坐标值均相对于该位置	Number	0
interval	间隔xx像素合并为一个坐标点	Number	10
coordinateIntervalCount	每隔xx个interval显示为大小坐标点	Number[]	[5, 10]
coordinateLineWidth	默认坐标点、大小坐标点的线条长度	Number[]	[4, 8, 12]
themeOption	主题配置	bgColor: string; // 背景颜色 textColor: string // 文本颜色 lineColor: string // 线条颜色	-
theme	主题，未指定themeOption时使用。light-亮色；dark-暗黑	String	light