Draw-utils NPM

封装 Draw 方法，实现画图（目前仅支持画矩形框图）框选的标注功能，该方法基于原生JS开发，所以无论在哪一个前端框架下使用其兼容性都很好

安装与引入

npm install draw-utils
import Draw from 'draw-utils'

用法详解

使用该方法时首先要在页面中创建好以下html固定的DOM结构：

<div class="draw-util-area">
  <div class="box"></div>
</div>

注：class="draw-util-area"是存放页面中需要框选标注的区域内容，class="box"是存放矩形框选图的内容

创建该方法实例

const draw = new Draw(options)

配置说明：

参数名	类型	描述	是否必须	默认值
options	Object	配置项(详细如下)	否	如下

options配置说明： |参数名|类型|描述|是否必须|默认值 |---|---|---|---|--- |isDraw | Boolean | 是否开启标注框选操作 | 否 | true |isRendBox | Boolean | 每次标注框选结束时是否需要显示框选的矩形图 | 否 | true |isRendBoxIndex | Boolean | 是否显示框选矩形图的索引值 | 否 | true |rendBoxIndexColor | String | 框选矩形图其索引值的颜色 | 否 | #1e1e1e |rendBoxIndexPosition | String | 框选矩形图其索引值的位置 | 否 | right |drawAreaHeight | Number | 标注框选区域的高度 | 否 | 500 |drawAreaWidth | Number | 标注框选区域的宽度 | 否 | 500 |drawBoxMaxNum | Number | 标注框选的最多数量 | 否 | 5 |drawBoxBorder | String | 标注框选矩形图的边框样式 | 否 | 1px dashed #1e1e1e |renderBoxBorder | String | 框选结束后矩形图的边框样式 | 否 | 1px solid #1e1e1e |boxMinHeight | Number | 标注框选图的最小高度限制 | 否 | 15 |boxMinWidth | Number | 标注框选图的最小宽度限制 | 否 | 15 |onMouseupCb | Function | 标注框选结束时的回调，参数返回Array，包含全部矩形框选图的相关信息 | 否 | - |onDrawExceed | Function | 标注框选超出最多数量的回调 | 否 | -