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')