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 |