draw-utils

封装 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	标注框选超出最多数量的回调	否	-

• 实例方法

方法名	描述	是否必须
onDraw	开启标注框选的初始化	是
onScroll	页面如有滚动时需调用此方法	否