shipmatserjack / canvas-draw-table

使用canvas实现画表格，以及移动，拖拽，拉伸，删除，回撤等功能

canvas-draw-table

使用 canvas 实现画表格，以及移动，拖拽，拉伸，删除，回撤等功能

体验地址

也可以在 github 上 clone 代码，直接打开 index.html

项目由来：有个报表识别的项目，识别结果可能不准确，需要在图片上二次编辑。在网上找了一圈，也没找到合适的框架，因此自己封装了一个，使用 canvas 绘制 table,并实现批量移动，拉伸，拖拽，删除，等功能

使用方式

import Draw from 'canvas-draw-table'

const draw = Draw({
    url: '', // 图片url，可不传
    dom: '', // canvas容器id或者dom,
    selectColor: "",
    selectActiveColor: "",
    drawSelectColor: "",
    defaultData: [
        {
            type: "cell",
            location: [
                [114, 100],
                [347, 100],
                [347, 229],
                [114, 229],
            ],
        }
    ]
}, modeChange: fn)

参数	类型	说明
url	string	背景图片地址(可省略)
dom	string dom	canvas 容器
selectColor	string	线条颜色（可省略）
selectActiveColor	string	选中颜色（可省略）
drawSelectColor	string	多选框颜色（可省略）
defaultData	array	初始数据(可省略)

（如果传了 url,则 defaultData 数据是相对图片的坐标，否则是相对容器的坐标）

modeChange 模式改变的回调函数，模式一共有【选择，移动，拉伸，绘制】， 默认为选择模式（背景图片不可选中，不可删除）

想要手动改变模式，可以通过

draw.setMode(mode)

使用方式

          draw.setMode("draw", {
            type: "table",
            tr: 3,
            td: 4,
          });

绘制 table 的时候，setMode 需要第二个参数，并传入绘制的行列

删除

if(draw.current || draw.currentArray.length > 0) {
	draw.delete();
}

保存

if(!draw.noUpdate) {
	draw.saveDraw()
}

撤销/反撤销

if(draw.history.length > 0) {
	draw.revoke()
}

if(draw.deleteHistory.length > 0) {
	draw.reRevoke()
}

放大/缩小

draw.zoom('up')

draw.zoom('down')