a drag and scale component for react
如何使用
首先，下载代码后进入项目根目录安装依赖包
$ cd <appName>
$ npm install然后启动开发环境
$ npm start打包编译
$ npm run build-esDragzoom
| props | Description | Type | Default |
|---|---|---|---|
| img | 背景图url | string(svg格式的需要传入经过base64编码后的dataUrl) | '' |
| style | dragzoom第一层div的样式 | HTMLStyleElement | {} |
| maxZoom | 最大缩放层级 | number | 2 |
| scaleable | 是否可以缩放 | boolean | true |
| draggable | 图层是否可以拖动 | boolean | true |
| onSizeChange | 图层大小变化时的回调 | (props, changed, all): void | NOOP |
| onDrag | 图层拖动时的回调 | (Position): void | - |
| onDragStop | 图层拖动结束时的回调 | (Position): Object | - |
| polygonDragDisabled | 禁用自定义图层的拖动 | boolean | true |
| onPolygonDragStop | 自定义图层停止拖动的回调 | (context:CanvasRenderingContext2D ,props:{id:string,path:Path}) => mixed | - |
| controlPaint | 控制自定义图层的绘画 | (context:CanvasRenderingContext2D ,props:{id:string,path:Path}) => mixed | - |
| dragControlPaint | 控制拖拽时自定义图层的绘画 | String | - |
| getSVGSize | 获取svg格式的背景图的实际大小 | (size: { width: number, height: number }) => mixed | - |
| allowAnyClickToDrag | 是否允许任意键拖动 | boolean | false |
| fixContent(实例方法) | 自适应弹出框内容(x,y为左上角定位) | (position: { x: number, y: number, width: number, height: number, offset: { top: number, left: number } }, placement: 'top' ¦ 'left' ¦ 'right' ¦ 'bottom' ¦ 'topLeft' ¦ 'topRight' ¦ 'bottomLeft' ¦ 'bottomRight' ¦ 'leftTop' ¦ 'leftBottom' ¦ 'rightTop' ¦ 'rightBottom') { |
DragzoomPolygon
| props | Description | Type | Default |
|---|---|---|---|
| capture | 是否捕获坐标 | boolean | false |
| capturePosition | 捕获坐标函数 | (a:[number,number]) => mixed | (a:[number,number]) => null |
| allowAnyClick | 是否响应右键或中键点击事件 | boolean | true |
| capturePosition | 捕获点击事件 | (position: { x: number, y: number }， event) => null | () => null |
| startMove | 鼠标移动开始事件 | (position: { x: number, y: number }， event) => null | () => null |
| stopMove | 鼠标移动结束事件 | (position: { x: number, y: number }， event) => null | () => null |
DragzoomPolygon.Polygon
| props | Description | Type | Default |
|---|---|---|---|
| path | 自定义图层的路径 | Array<[number,number]> | [] |
| polygonDrag | 是否能拖动 | boolean | false |
DragzoomItems
| props | Description | Type | Default |
|---|---|---|---|
| pointsDisabled | 所有点位能否拖动 | boolean | false |
| onDrag | 点位拖动时的回调 | (point: Point) => mixed | (point: Point) => mixed |
| onDragStop | 点位拖动结束时的回调 | (point: Point) => mixed | (point: Point) => mixed |
DragzoomItem
| props | Description | Type | Default |
|---|---|---|---|
| id | 点位id | boolean | false |
| children | 子项 | React.Node | null |
| disabled | 是否禁用拖动 | boolean | false |
| capture | 是否捕获坐标 | boolean | false |
| allowAnyClickToDrag | 是否允许任意键拖动 | boolean | false |
| capturePosition | 捕获坐标函数 | (a:[number,number]) => mixed | (a:[number,number]) => null |