vue3-canvas-create-range

一个基于Vue3的画布范围选择插件，支持多边形绘制、选择和编辑功能。

特性

• 🎯 支持顶点拖动和整体移动
• ⌨️ 支持键盘快捷操作
• 🎨 可自定义填充颜色和选中状态样式
• 📏 可配置最小顶点数和最大多边形数量
• 🔄 支持响应式布局

安装

npm install vue3-canvas-create-range

使用

全局注册

import { createApp } from 'vue'
import CanvasRange from 'vue3-canvas-create-range'
import 'vue3-canvas-create-range/style.css'

const app = createApp(App)
app.use(CanvasRange)
app.mount('#app')

组件中使用

<template>
  <div style="width: 500px; height: 300px;">
    <CanvasRange
      v-model:polygons="polygons"
      :initial-polygons="initialPolygons"
      :fill-color="'#2196f380'"
      :selected-color="'#ff980080'"
      :min-points="3"
      :max-polygons="5"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Point } from 'vue3-canvas-create-range'

const polygons = ref<Point[][]>([])
const initialPolygons = [
  [
    { x: 100, y: 100 },
    { x: 200, y: 100 },
    { x: 150, y: 200 },
  ],
]

const handleSelect = (index: number) => {
  console.log('Selected polygon:', index)
}
</script>

API

Props

| 属性名 | 类型 | 默认值 | 说明 | | ---------------- | ----------- | ------------- | ---------------------------- | | v-model:polygons | Point[][] | [] | 多边形数据，双向绑定 | | initial-polygons | Point[][] | [] | 初始多边形数据 | | fill-color | string | '#2196f380' | 多边形填充颜色(勿用rgba格式) | | selected-color | string | '#ff980080' | 选中状态填充颜色 | | min-points | number | 3 | 最小顶点数 | | max-polygons | number | Infinity | 最大多边形数量 | | keydown-enable | boolean | false | 是否启用键盘快捷键 | | mouse-enable | boolean | false | 是否启用鼠标交互 | | rectangle | boolean | false | 是否只能画矩形 |

Events

| 事件名 | 参数 | 说明 | | --------------- | ------------------------------------ | -------------------------------- | | update:polygons | (polygons: Point[][]) | 多边形数据更新时触发（完整数据） | | select | (index: number) | 选中多边形时触发 | | add | (polygons: Point[]) | 新增多边形时触发 | | update | (index: number, polygons: Point[]) | 编辑时触发 | | delete | (index: number) | 删除多边形时触发 |

Methods

| 方法名 | 参数 | 说明 | | ------ | ---- | -------------- | | clear | - | 清除所有多边形 |

类型定义

interface Point {
  x: number
  y: number
}

键盘快捷键

当keydown-enable设置为true时：

• Esc: 取消当前绘制或清除选中
• Delete: 删除选中的多边形

鼠标操作

当mouse-enable设置为true时：

• 左键点击：开始/继续绘制多边形
• 右键点击：完成当前多边形绘制
• 拖动顶点：调整多边形形状
• 拖动多边形：移动整个多边形

许可证

MIT