canvas-mark-board
v0.0.1-beta.6
Published
## 简介 `canvas-mark-board` 基于原生canvas封装的图像标注工具,在 vue / react / 原生js 应用中都可以实现标注功能。提供了一系列事件和方法,用于管理标注对象、绘制标注形状、导入标注数据等操作。
Downloads
77
Maintainers
Readme
canvas-mark-board·
简介
canvas-mark-board
基于原生canvas封装的图像标注工具,在 vue / react / 原生js 应用中都可以实现标注功能。提供了一系列事件和方法,用于管理标注对象、绘制标注形状、导入标注数据等操作。
文档
安装
pnpm add canvas-mark-board
npm install canvas-mark-board
yarn add canvas-mark-board
使用
工具模块使用
import CanvasMarkBoard from 'canvas-mark-board'
const mark = new CanvasMarkBoard({
view: "#mark-box", // dom 选择器
})
mark.setDrawType('rect')
mark.on('oncomplete',(e)=>{e.ok({})})
CDN 使用
<srcipt src="https://www.unpkg.com/[email protected]/dist/index.umd.js"></srcipt>
const mark = new CanvasMarkBoard({
view: "#mark-box", // dom 选择器
})
mark.setDrawType('rect')
mark.on('oncomplete',(e)=>{e.ok({})})
ESM 使用
import { CanvasMarkBoard } from 'https://www.unpkg.com/[email protected]/dist/index.esm.js'
const mark = new CanvasMarkBoard({
view: "#mark-box", // dom 选择器
})
mark.setDrawType('rect')
mark.on('oncomplete',(e)=>{e.ok({})})
配置项
config
配置项
new CanvasMarkBoard({
lineWidth: 2,
drawColor: 'yellow', // 绘制中的颜色
fillColor: 'rgba(255,255,255,.5)'; // 选中填充颜色
showIndex: true; // 是否显示index
disableZoom: false; // 是否关闭缩放画板功能
disableMove: false; // 是否关闭移动画板功能
});