React-resize-svg NPM

React Resize HOC Components

基于React实现的可以拖拽和缩放的SVG组件库，组件库核心两个组件：ResizeSvg和ResizeSvgHOC。其中ResizeSvgHOC是高级组件，作用是实现组件包装和Props传递。

README_EN

效果图

npm.io

Document

ResizeSvg & ResizeSvgHOC

Resize SVG 盒子模型分析

ResizeSvg 如下图显示，分为两块部分：操作区域（ResizeWidth）和显示区域（ContentWidth）。其中padding也是可操作点（四角的圆点）的直径（强调：是直径），默认值：8

npm.io

属性 API

Attribute Name	type	Description
padding	number	间距默认值：`8`
width	number	宽度，必须是数值。单位：px。但是不支持：`100px`方式设置
height	number	宽度，必须是数值。单位：px。但是不支持：`100px`方式设置

样式 API

ClassName Attribute	Description
svgContainerStyle	svg tag style
showLineStyle	show line style (default dasharray)
showCircleStyle	show circle style
triggerLineStyle	trigger line style
triggerCircleStyle	trigger circle style
triggerMoveRectStyle	trigger move rect style

注入的 Props

通过ResizeSvgHOC包含后的子组件，将会自动注入一下Props

Prop Name	type	Description
padding	number	padding
width	number	SVG 真实宽度
height	number	SVG 真实高度
contentWidth	number	可显示区域内容宽度
contentWidth	number	可显示区域内容高度

使用

npm 安装

npm install react-resize-svg

开发组件

基于ResizeSvgHOC 开发一个自定义的图形组件。例如：

import React, { Component } from "react";
import ResizeSvgHOC from "./ResizeSvgHOC";

class EllipseSvg extends Component {
	render() {
    let { padding, contentWidth, contentHeight } = this.props;
		return (
			<ellipse
				cx={contentWidth / 2 + padding}
        cy={contentHeight / 2 + padding}
        rx={contentWidth/2}
        ry={contentHeight/2}
				style={{ fill: "green" }}
			/>
		);
	}
}
// 注意HOC方式导出
export default ResizeSvgHOC(EllipseSvg);

使用ResizeSvgHOC导出组件后，会新增三个props:padding,contentWidth和contentHeight 方便计算和使用。（上面文章的：Resize SVG 盒子模型分析）

不能直接使用 ResizeSvg 然后加入 svg的子标签方式（eg: <rect/>, <path/> <ellipse/>）。

自定义属性（含样式属性style , className）

	- 自定义组件内部定义模式

		```JSX
		import React, { Component } from "react";
		import ResizeSvgHOC from "./ResizeSvgHOC";

		class EllipseSvg extends Component {
			render() {
				let { padding, contentWidth, contentHeight } = this.props;
				return (
					<ellipse
						cx={contentWidth / 2 + padding}			
						cy={contentHeight / 2 + padding}
						rx={contentWidth/2}
						ry={contentHeight/2}
						style={{ fill: "green" }}
					/>
				);
			}
		}
		export default ResizeSvgHOC(EllipseSvg);
		```

	- 自定义组件传参模式
		```
		<RectSvg
			width="100"
			height="100"
			top="10"
			left="10"
			rx="20"
			ry="20"
			style={{ fill: "red" }}
			className={style.customClass}
		/>
		```

Q&A

加载ResizeSvg图形的外部容器，position必须是absolute

	图形的缩放会影响所在图层的大小，如果采用默认布局，缩放图形的时候，会影响整体文档流，从而影响其他图形的位置。

	```JSX
	// container position absolute
	<div style={{ position: "absolute" }}>
		<RectSvg
			width="100"
			height="100"
			top="10"
			left="10"
			style={{ fill: "red" }}
			className={style.customClass}
		/>
	</div>
	```