/canvas-mark-board

基于canvas封装的图像标注工具

Primary LanguageTypeScriptMIT LicenseMIT

canvas-mark-board· npm version

简介

canvas-mark-board 基于原生canvas封装的图像标注工具，在 vue / react / 原生js 应用中都可以实现标注功能。提供了一系列事件和方法，用于管理标注对象、绘制标注形状、导入标注数据等操作。

原生js在线演示

vue在线演示

react在线演示

文档

文档

安装

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
});