canvas-annotation

v1.0.5

Published

3 years ago

A JavaScript library for annotations

0High
0Medium
0Low

coder_man

annotate annotation canvas canvas-annotation

annotation

canvas做的在线标注库，适用于自动驾驶标注，目前支持图像的指定位置缩放，拖动，绘制矩形、多边形、线等，库会持续维护。

Online example

快速使用

    import Canvas from 'canvas-annotation'
    interface canvasProps = {
        el: string | HTMLCanvasElement,
        width?: number,
        height?: number,
        imgUrl: string
    }
    let props: canvasProps = {
        el: '#app' // 你的canvas标签的id
    }
    let c = new Canvas(
        el: document.querySelector('#c'),
        width: 900,
        height: 500,
        imgUrl: 'https://img0.baidu.com/it/u=2384171364,597242015&fm=253&fmt=auto&app=138&f=JPEG?w=945&h=500',
        customTag(item) {
            this.ctx.save()
            this.ctx.beginPath()
            this.ctx.setTransform(1, 0, 0, 1, 0, 0)
            this.ctx.font = '14px 微软雅黑'
            this.ctx.fillStyle = item.lineColor
            this.ctx.fillText('自定义的标签' + item.type, item.points[0].x * this.matrix.a + this.matrix.e, item.points[0].y * this.matrix.a + this.matrix.f)
            this.ctx.closePath()
            this.ctx.restore()
        }
    )

上面的操作会生成一个宽900，高500的canvas，并且拥有自定义的文案绘制。

如何绘制矩形，切换工具

    // 承接上面的c实例，我们将c的selectTool改变即可。
    c.selectTool = 'rect'
    // 此时你在canvas上直接按矩形的绘制规则绘制即可。

如何选中图形，切换工具到select

    c.selectTool = 'select'

您可以通过自定义快捷键来更新这些形状类型。例如：

    document.addEventListener('keydown', e => {
        if (e.key === '1') {
            c.selectTool = 'rect'
        }
        if (e.key === '2') {
            c.selectTool = 'polygon'
        }
        if (e.key === 'v') {
            c.selectTool = 'select'
        }
    })

目前库支持的形状类型

type: 'rect' | 'polygon' | 'line' | 'point' | 'rectRotate'

绘制规则

矩形（rect）绘制，鼠标按下确认第一个点，鼠标移动，矩形绘制，鼠标二次点击确认结束点，绘制结束。
多边形（polygon）绘制，鼠标单击、移动依次选择点，鼠标双击结束绘制多边形。
线(line)绘制，同多边形。
点(point)绘制，切换点工具，然后在画布上直接点击即可。
旋转矩形(rectRotate)绘制，绘制规则同矩形。只是在图形上方多了一个旋转点。

选中图形

如果您希望通过鼠标点击选中图形，你需要先将selectTool设置为'select',此时工具变成了选择工具，这时候就可以选中图形，并对图形进行操作了。

属性

| 属性名 | 类型 | 描述 | | :--------| :------| :------- | | el | string|HTMLCanvasElement | 用于绑定你的canvas标签，可以传id、class或者canvas元素 | | width | number | 画布宽度 | | height | number | 画布高度 | | imgUrl | string | 要标注的素材图片地址 | | selectTool | 'rect'|'polygon'|'line'|'point'|'rectRotate'|'select' | 形状 | | minScale | number | 最小缩放倍数 | | maxScale | number | 最大缩放倍数 | | activeIndex | number | 当前激活的下标, 如果想设置不激活，请把此属性设置为-1 | | focusMode | boolean | 专注模式，默认false |

方法

| 方法名 | 参数 | 描述 | |:------ | :------- | :-----| | setImage | 图片地址 | 设置标注图像 | | fitInWindow | 无 | 使图像自动适配当前视口 | addShape | shape图形 | 画布中添加一个图形 | resetCanvas | 无 | 重置画布 | | update | 无 | 更新画布 | clear | 无 | 清空画布 | getCurrentActiveShape | 无 | 获取当前激活的图形 | setMouseCursor | pointer|auto|css样式的cursor | 设置鼠标的样式 | setData | 数组[shape, shape] | 初始化素材时，需要显示的图形数据 | getResultData | 无 | 获取标注结果数据 | | deleteByIndex | 图形下标 | 删除对应的图形 | destory | 无 | 清空事件监听器，请先调用此函数，在将你的标注实例赋值为null

事件

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme