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/canvas-mark-board@0.0.1-beta.4/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/canvas-mark-board@0.0.1-beta.4/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
});