draw-utils
v1.0.7
Published
该插件提供了在指定区域的矩形框标注功能,实现用户画框标注等操作
Downloads
4
Readme
封装 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 | 页面如有滚动时需调用此方法 | 否 |