canvas-annotation v1.0.5

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',此时工具变成了选择工具，这时候就可以选中图形，并对图形进行操作了。

属性

方法

事件