vue3-canvas-create-range

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

Events

Methods

类型定义

interface Point {
  x: number
  y: number
}

键盘快捷键

当keydown-enable设置为true时：

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

鼠标操作

当mouse-enable设置为true时：

• 左键点击：开始/继续绘制多边形；画线模式下第二次点击自动完成线段
• 右键点击：完成当前多边形绘制；画线模式下取消未完成的绘制
• 拖动顶点：调整多边形/线段形状
• 拖动多边形：移动整个多边形；画线模式下可拖动整条线段

性能说明

组件用 三张叠在一起的透明画布，各管一类东西，这样改某一类时不必重画其它类：

悬停预览：
样式与层级和正式选中一致（selected-color / selected-line-color，并提到选中层置顶），区别只是：不出控制点、不改内部选中态、不发 select，只发 hover。
换悬停目标时会重画底层+选中层（形状要从底层挪上/挪回），开销与「点一下换选中」同级；同一目标上移动鼠标不会重复重画，拖拽仍只动选中那一个。

交互层现在的作用：
只负责「画到一半」的临时画面——例如多边形已点的顶点、连到鼠标的虚线、矩形拖出的虚线框。这些还不是正式数据里的形状，完成后会进底层/选中层，交互层清空。
它和「拖已有选中项」无关：拖已有形状走的是选中层，交互层保持空白。

为什么拖动能接近「每帧只画 1 个」：
未选中的形状印在底层且拖动时不碰；被拖的一定是选中项，只擦重选中层上的那一个。总数 10 个还是 1000 个，拖动时的绘制量差不多。

其它：

• 悬停/点击用空间网格做命中，形状多时不必每次从第一个扫到最后一个
• update / update:polygons 拖拽时实时跟手（每帧最多同步一次）；松手再发 update-finish
• 支持 devicePixelRatio 高分屏清晰绘制
• 父级 CSS transform: scale 不在组件内适配；若业务有缩放，请避免直接 scale 画布，或由使用方自行处理

许可证

MIT