用于图片标注
- 支持绘制 矩形（Rect）、多边形（Polygon）、圆形（Circle）、椭圆形（Ellipse）、点（Dot）、多框；后续考虑支持更多图形。
- 支持放大缩小画布、平移画布
npm i tagging-master
<div style="height:600px">
<canvas id="canvas"></canvas>
</div>// js
import { TaggingMaster } from 'tagging-master'
const options = {
canvasId: 'canvas',
tools: [
{
name: 'uuid1',
type: 'rect'
},
{
name: 'uuid2',
type: 'polygon'
},
...
]
}
const tm = new TaggingMaster(options);
tm.loadImage(imageUrl);
tm.setTool('uuid1') //在图片上画矩形
tm.setTool('uuid2') //在图片上画多边形enum DrawType {
Rect = 'rect',
Polygon = 'polygon',
Ellipse = 'ellipse',
Circle = 'circle',
MultiRect = 'multiRect',
Dot = 'dot'
}
type ToolOption = {
name: string;
type: DrawType;
multiple?: boolean;
}
type TaggingMasterOptions = {
canvasId: string;
tools?: Array<ToolOption>;
}resetTools(tools: ToolOption[]): void; // 重置并替换所有标注工具
loadImage(url: string): Promise; // 加载图片
setTool(toolName: string): void; // 设置工具、设置后可以画图
loadFromTaggingData(taggingData: TaggingData): Promise; // 加载标记数据
getTaggingData(): (RectJson | EllipseJson | PolygonJson | CircleJson | DotJson | NoneJson)[]; // 获取标记数据
showAll(): void; // 显示当前所有标记图形
hideAll(): void; // 隐藏当前所有标记图形
show(name: string): void; // 显示指定标记图形
hide(name: string): void; // 显示指定标记图形
zoomOut(): void; // 缩小画布
zoomIn(): void; // 放大画布
tm.on('eventName', () => {console.log('触发了eventName 事件')})
事件名
- 'tagging:finish' 完成一个标注图形后触发
MIT