Package Exports
- canvas-select
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvas-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
canvas-select
用于 2D 图片标注,支持矩形标注、多边形标注、点标注。demo
1、使用
设置 instance.createType 指定需要创建形状类型。
创建矩形时,按住鼠标左键拖动完成创建。
创建多边形时,鼠标左键单击添加点,双击闭合完成创建,
Escape
退出创建,Backspace
退一步删除选择点。按住鼠标右键拖动画布。
鼠标滚轮缩放画布。
选中形状,
Backspace
删除通过 instance.dataset 查看标注结果
支持 UMD 模块规范
<script src="path/to/canvas-select.min.js"></script>
npm i canvas-select
<canvas width="500" height="500" class="container"></canvas>
// 构造函数CanvasSelect 参数1表示canvas dom节点,参数2表示需要标注的图片链接
const instance = new CanvasSelect('.container', '/one.jpg');
let option = [
{
label: '矩形标注', // label (非必填)
type: 1, // 矩形 (必填)
coor: [
// 矩形坐标,由2个点表示 (必填)
[10, 10],
[100, 100],
],
},
{
label: '多边形标注',
type: 2, // 多边形 (必填)
coor: [
// 多边形坐标,由3个以上点表示 (必填)
[30, 150],
[120, 100],
[50, 200],
],
},
{
label: '点标注',
type: 3, // 点标注 (必填)
coor: [800, 800],
},
];
instance.on('load', () => {
// 图片加载完成时候加载数据
instance.setData(option);
});
// 0 不创建(默认),1创建矩形,2创建多边形,3点标注
instance.createType = 1;
instance.on('select', (info) => {
console.log('select', info);
// 可对选中对参数info进行修改例如标签名
// 例如:info.label="hello"
// 然后调用instance.update()更新视图
});
2、实例属性
属性名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
createType | boolean | 0 | 0 不创建,1 创建矩形,2 创建多边形 |
lock | boolean | false | 是否锁定画布 |
MIN_WIDTH | number | 10 | 最小矩形宽度 |
MIN_HEIGHT | number | 10 | 最小矩形高度 |
strokeStyle | string | rgb(0, 0, 255) | 形状边线颜色 |
fillStyle | string | rgba(0, 0, 255,0.1) | 形状填充颜色 |
activeStrokeStyle | string | #f00 | 选中的形状边线颜色 |
activeFillStyle | string | #f00 | 选中的形状填充颜色 |
ctrlStrokeStyle | string | #000 | 控制点边线颜色 |
ctrlFillStyle | string | #fff | 控制点填充颜色 |
ctrlRadius | number | 3 | 控制点半径 |
labelFillStyle | string | #fff | label 填充颜色 |
labelFont | string | 12px serif #000 | label 文字样式 |
labelMaxLen | number | 5 | label 字符最大显示个数,超出字符将用...表示 |
3、实例方法
方法名称 | 参数类型 | 说明 |
---|---|---|
setData | Array | 加载初始数据 |
setScale | boolean | true 放大画布,false 缩小画布 |
fitZoom | 无 | 适配图片到画布 (contain) |
update | 无 | 更新画布, 修改实例属性后要执行此方法 |
deleteByIndex | number | 根据索引删除形状 |
4、事件
事件名称 | 回调参数 | 说明 |
---|---|---|
select | info | 当前选中的数据 |
add | info | 当前添加的数据 |
delete | info | 当前删除的数据 |
resize | info | 当前正在缩放的数据 |
load | 无 | 图片加载完成 |
error | error | 错误信息 |