React-dnz NPM | npm.io

a drag and scale component for react

如何使用

首先，下载代码后进入项目根目录安装依赖包

$ cd <appName>
$ npm install

然后启动开发环境

$ npm start

打包编译

$ npm run build-es

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')

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

props	Description	Type	Default
path	自定义图层的路径	Array<number,number>	[]
polygonDrag	是否能拖动	boolean	false

props	Description	Type	Default
pointsDisabled	所有点位能否拖动	boolean	false
onDrag	点位拖动时的回调	(point: Point) => mixed	(point: Point) => mixed
onDragStop	点位拖动结束时的回调	(point: Point) => mixed	(point: Point) => mixed

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

#V2 import { V2 } from 'react-dnz';

props	Description	Type	Default
img	背景图url	string	''
style	容器样式	HTMLStyleElement	{}
maxScale	最大缩放层级	number	2
scalable	是否可以缩放	boolean	true
draggable	图层是否可以拖动	boolean	true
onSizeChange	图层大小变化时的回调,包括图片路径变更	(e:Event, position: {x: number, y: number }) => null	NOOP
onDragStop	图层拖动结束时的回调	(e:Event, position: {x: number, y: number }) => null	-
allowAnyClick	是否允许任意键拖动	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')

(处于性能考虑，此处尽量统一样式，并且剥离绘制捕获内容至单独组件)

props	Description	Type	Default
style	容器样式	HTMLStyleElement	{}
controlPaint	图层自定义绘制方法, 返回false则采用默认绘制方法	(context:CanvasRenderingContext2D ,props:{id:string,path:Path,color:Object,shape:string}) => boolean	() => false
pathStyle	路径填充样式	{ strokeStyle: string,fillStyle: string,lineWidth: string }	{fillStyle: 'rgba(0, 132, 255, 0.2)',strokeStyle: '#4C98FF',lineWidth: 2,}
vertexStyle	端点填充样式	{ strokeStyle: string,fillStyle: string,lineWidth: string }	{fillStyle: 'rgb(255,255,255)',strokeStyle: 'green',lineWidth: 3,}
polygons	自定义图层	Polygon	[]

props	Description	Type	Default
path	自定义图层的路径	Array<number,number>	[]
id	唯一标识	string	''
color	图层颜色	Object	{}
shape	形状	string	''
custom	是否自定义绘制	boolean	false
vertex	是否绘制端点	boolean	true
dash	虚线分段数据，形如5,10, 代表虚线长度为5，间隔为10	string	''

props	Description	Type	Default
style	容器样式	HTMLStyleElement	{}
onDrag	拖动时的回调	(id: string, position: Position, e: Event) => null	(point: Point) => mixed
onDragStop	拖动结束时的回调	(id: string, position: Position, e: Event) => null	(point: Point) => mixed

props	Description	Type	Default
id	点位id	boolean	false
children	子项	React.Node	null
disabled	是否禁用拖动	boolean	true
position	定位坐标	{x: number, y: number}	{x: 0, y: 0}
offset	偏移量	{ left: number, top: number }	{left: 0, top: 0}

props	Description	Type	Default
capture	捕获坐标	boolean	false
onMouseMove	鼠标移动	(position: Position, e: Event) => null	f => f
onDoubleClick	双击事件	(position: Position, e: Event) => null	f => f
onClick	单击事件	(position: Position, e: Event) => null	f => f
controlPaint	偏移量	(context:CanvasRenderingContext2D ,props:{id:string,path:Path,color:string,shape:string}) => mixed	f => f