@lemonyc/region-editor

lemonyc 组件库 · Vue 3 组件包

基于 Vue 3 的区域绘图编辑器组件 DrawingEditor，在 Canvas 画布上绘制直线/矩形，自动识别封闭区域并支持颜色标注和标签。零第三方运行时依赖，所有几何算法自实现。

安装

npm install @lemonyc/region-editor

Vue 3 为 peer dependency，请确保项目中已安装：

npm install vue

快速开始

<template>
  <DrawingEditor ref="editorRef" @region-select="onRegionSelect" />
</template>

<script setup>
import DrawingEditor from '@lemonyc/region-editor'
import '@lemonyc/region-editor/dist/style.css'
import { ref } from 'vue'

const editorRef = ref(null)

function onRegionSelect({ id, extraData, color, area }) {
  console.log('选中区域:', id, extraData, area)
}
</script>

文档

本包的完整 API 文档（Props / Events / 方法 / 数据格式 / 操作说明）见 doc/region-editor.md。

本包附带的 doc/ 文件夹内含 lemonyc 组件库全量子包文档：

| 文档 | 说明 | |------|------| | doc/region-editor.md | 区域绘图编辑器组件（本包） | | doc/color.md | 颜色工具 | | doc/lemonyc.md | 聚合包（全量安装入口） |

License

MIT