JSPM – draw-utils@1.0.7

Package Exports

draw-utils
draw-utils/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (draw-utils) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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	页面如有滚动时需调用此方法	否

draw-utils

Package Exports

Readme

安装与引入

用法详解

创建该方法实例

实例方法