qcc-table-mending

介绍

一款对图片支持线框裁剪的vue组件， 输出lines和boxs 位置信息

环境

  node>=12.x

样例

开始

npm install qcc-table-mending --save

使用

import TableMendingVue from 'qcc-table-mending ';
Vue.use(TableMendingVue)

参数

• 参数

  | 名称 | 类型 | 样例 | 描述 | | ---- | ---- |---- |---- | | image | String |'../xxx./demo.png' |图片,支持图片地址或base64格式 | | data | Object |{lines： {'cols': [], 'rows': []}, boxs: []} |线段，线框信息 | | options | Object |options = {isShowGuideLine, maxWidth,linewidth, linesColor} | 其他参数 |

• 事件 | 名称 | 回调 |描述 | | -------- | ---- | ---- | | rowadd | 当前线段位置 [x1,y1,x2,y2] |加横线 | | coladd | 当前线段位置 [x1,y1,x2,y2] |加竖线 | | mergelines | 合并的单元格位置[[x1,y1,x2,y2]] |合并线 | | deleteline | 删除的线段位置[x1,y1,x2,y2] |删除线 | | deleteline | 删除的线段位置[x1,y1,x2,y2] |删除线 | | savemending | 线和框信息 {lines: {}, boxs: []} |保存裁剪信息 | | automending | 自动补线 {lines: {}, boxs: []} |自动识别线框 | | clearmending | 清空画布 |清空画布 | | autorowsmending | 自动补横线 |自动补横线 |

样例

 <TableMendingVue
    :image = image
    :data = "data"
    :options = "{
      isShowGuideLine: isShowGuideLine,
      maxWidth: maxWidth,
      linewidth: linewidth,
      linesColor: linesColor
    }"
    @rowadd = "rowadd"
    @coladd = "coladd"
    @mergelines = "mergelines"
    @deleteline = "deleteline"
    @savemending = "savemending"
    @automending = "automending"
    @clearmending = "clearmending"
  />