# pdf-marking-div-simple-test

**Repository Path**: jiang516/pdf-marking-div-simple-test

## Basic Information

- **Project Name**: pdf-marking-div-simple-test
- **Description**: 阅卷的div简易版
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-05-11
- **Last Updated**: 2023-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### Marking 阅卷

详细使用方法请参考demo

----


### 属性


---
| 属性名      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| load-fn     | 数据加载方法,该方法参数为调用load是传入的参数   | Function(arg)  |   —   |    —     |
| image-load-fn     | 图片加载方法   | Function    |   — |     —    |
| text-load-fn     | 文字信息加载方法   | Function(pageIndex)    |   — |     —    |
| selection-bg-color     | 文本选区背景颜色   | String    | — | rgba(0, 180, 255, 0.5)   |
| whole-page  | 是否整页展示    | Boolean   | —   | false   |
| watermark  | 水印    | Object   | —   | 见watermark对象   |
| page-count  | 页面加载页数    | Number   | —   | 5   |
| toolbox-height  | toolbox高度    | String   | —   | 30px   |
| init-config  | 初始化配置，每次open/load都会重新初始化    | Object   | —   | 见scrollbarConfig对象   |
| scrollbar-config  | 滚动条配置    | Object   | —   | 见scrollbarConfig对象   |
| max-scale  | 最大缩放比例    | Number   | —   | 4   |
| always-show-mark-types  | 始终显示的标记，mark对象中的type    | Array   | —   | —   |
| shadow-config  | 图片阴影 ({shadowColor:'blue',shadowBlur:20})   | String   | —   | —   |

---
### 对象

#### watermark

水印配置

---
| 属性名      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| text    | 水印文字   | String  |   —            |    没有水印文字     |
| color     | 水印颜色   | String    |   — |     rgba(255,0,0,0.6)    |
| fontSize     | 水印文字大小   | Number    | — |  16  |

#### init-config

初始化配置，每次open都会重新初始化

---
| 属性名      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| markShow     | 是否默认显示标记   | Boolean  |   —            |    false     |
| scrawlShow     | 是否默认显示涂鸦   | Boolean    |   — |     false    |
| isExpandScrawlTool     | 是否默认展开涂鸦工具   | Boolean    | — | false   |
| scaleType  | 缩放类型/大小| String/Number| page-fit,page-actual,page-width,数字   | page-fit   |
| rotation  | 默认旋转角度    | Number   | —   | 0   |
| pointerType  | 默认指针类型    | String   | text,hand   | text   |


#### scrollbarConfig

滚动条配置项

---
| 属性名      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| width     | y方向滚动条宽度   | String  |   —            |    17px     |
| height     | x方向滚动条高度   | String    |   — |     17px    |
| backgroundColor  | 滑块背景颜色    | String   | —   | #d9d9d9   |
| borderRadius  | 滑块圆角    | Number   | —   | 0   |


#### mark

标记对象

---
| 属性名      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| markid     | 标记id   | String  |   —            |    uuid()     |
| start     | 如果是文字标记，为开始文字的坐标（pageIndex-index）;如果是矩形标记，为页索引   | String    |   — |     —    |
| end     | 如果是文字标记，为结束文字的坐标（pageIndex-index）;如果是矩形标记，为JSON.stringify({x,y,width,height})  | String    | — | —   |
| type     | 随意取  | String    | — | —   |
| config  | 标记配置    | Object   | —   | —   |
| —stroke  | 边框颜色    | String   | —   | —   |
| —strokeWidth  | 边框宽度    | Number   | —   | —   |
| —fill  | 填充颜色    | String   | —   | —   |
| —type  | 样式类型，不填为矩形（默认）    | String   | underline或不填   | —   |

注意：
如果既没有stroke也没有fill，则：
1、如果是文字标记，默认：```fill='rgba(0,255,0,0.3)'```
2、如果是矩形标记，默认：```stroke = 'green'; strokeWidth = 5```


---

### 事件


---
| 事件名      | 说明    | 参数      |
|---------- |-------- |---------- |
| page-change     | 页码改变   | pageIndex  |
| progress-change     | 进度发生改变/角度发生变化/缩放变化   | { scrollHeight,pageIndex,progress }    |
| contextmenu  | 鼠标右键菜单    | selection/null   |
| selection-change  |  选区变化   | selection   |
| scrawl-complete  | 涂鸦完成   | scrawlData   |
| clip-complete  | 截图完成   | {pageIndex,x,y,height,width,dataURL}   |
| page-unload  | 页面销毁   | pageIndex   |
| page-loaded  | 页面加载完成（mounted完成后）   | pageIndex   |
| mark-click  | 标记鼠标点击事件   | mark, evt   |
| mark-mouseenter  | 标记鼠标移入事件   | mark, evt   |
| mark-mouseout  | 标记鼠标移出事件   | mark, evt   |
| isOpened  | 卷打开后触发，可使用instance.isOpened来判断是否打开   | —   |

注：
1、事件【scrawl-complete】传出数据scrawlData请勿修改，将其存为数组，在open时做为scrawlList参数传入，
2、scrawlList的对象中不能有pageIndex相同的多个对象

### 方法


---
| 方法名      | 说明    | 参数      |
|---------- |-------- |---------- |
| scrawl     | 编辑涂鸦  | —  |
| exitScrawl     | 推出涂鸦编辑   | —    |
| setPointerType     | 设置指针类型   | hand/text    |
| zoomin     | 放大   | —    |
| zoomout  | 缩小    | —   |
| setScaleType  | 设置缩放类型/大小    | page-fit,page-actual,page-width,数字  |
| reload  | 重新加载    |  —  |
| open  | 打开    | { data,markList,scrawlList }   |
| showMark  |  显示标记   |  — |
| hideMark  | 隐藏标记    | —   |
| showScrawl  | 显示涂鸦    | —   |
| hideScrawl  | 隐藏涂鸦    | —   |
| rotateCw  | 顺时针旋转    | —   |
| rotateCcw  | 逆时针旋转    | —   |
| toggleSearchBoxShow  | 切换搜索栏显示    | —   |
| exitSearch  | 关闭搜索栏    | —   |
| search  | 搜索    | 需要搜索的文本   |
| prevSearchResult  | 上一个搜索结果    | —   |
| nextSearchResult  | 下一个搜索结果    | —   |
| addMark  | 添加标记    | mark   |
| removeMark  | 移除标记    | markid   |
| addScrawlData  | 设置某页的涂鸦数据（{pageIndex:x,data:[]}）    | —   |
| setScrawlData  | 设置涂鸦数据 ([{pageIndex:x,data:[]},....])   | —   |
| copySelectText  | 复制选区文本    | —   |
| skipPage  | 跳转页面    | pageIndex   |
| skipByWordPos  | 通过文字位置跳转页面    | wordPos,{behavior = '', block = 'nearest', inline = 'nearest'}   |
| getSelection  | 获取选区    | —   |
| nextPage  | 下一页    | —   |
| prevPage  | 上一页    | —   |
| clip  | 截图    | —   |
| exitClip  | 退出截图，参数是true时触发clip-complete事件    | isComplete   |
| restorePage  | 将页面调整到适合页面，旋转角度为0    | — |

注意：
open方法参数为{ data,markList,scrawlList }，或者使用load-fn 返回{ data,markList,scrawlList }格式的数据方可加载