# react-dnz > React drag and zoom component Latest version **1.5.5-beta** (published 2021-01-06) · MIT license · 0 weekly downloads ## Install ```sh npm install react-dnz pnpm add react-dnz yarn add react-dnz bun add react-dnz ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.5.5-beta | | Published | 2021-01-06 | | First published | 2018-10-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 256.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 5 | | Maintainers | yoranfu, linpengfei1995, huangwp | ## Links - npm: https://www.npmjs.com/package/react-dnz - Repository: https://github.com/h3ciot/react-dnz - Issues: https://github.com/h3ciot/react-dnz/issues - npm.io page: https://npm.io/package/react-dnz ## Dependencies (2) - [react-draggable](https://npm.io/package/react-draggable.md) ^3.3.0 - [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^2.2.1 ## Recent versions - 1.5.5-beta (latest) — 2021-01-06 - 1.5.4-beta (beta) — 2019-12-30 - 2.0.2-beta (prebeta) — 2019-07-02 - 1.5.3-beta — 2019-12-30 - 1.5.2-beta — 2019-12-25 - 1.5.1-beta — 2019-11-05 - 1.5.0-beta — 2019-10-14 - 1.4.13-beta — 2019-10-11 - 1.4.12-beta — 2019-10-09 - 1.4.11-beta — 2019-09-18 - 1.4.10-beta — 2019-09-18 - 1.4.9-beta — 2019-08-27 - 1.4.8-beta — 2019-08-20 - 1.4.7-beta — 2019-08-16 - 1.4.6-beta — 2019-08-16 - … 22 more at https://npm.io/package/react-dnz/versions ## README a drag and scale component for react ## 如何使用 首先，下载代码后进入项目根目录安装依赖包 ```bash $ cd $ npm install ``` 然后启动开发环境 ```bash $ npm start ``` 打包编译 ```bash $ npm run build-es ``` ## Dragzoom | 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 | --- _Source: https://npm.io/package/react-dnz · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._