react-resize-svg

React Resize HOC Components

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

README_EN

效果图

Document

ResizeSvg & ResizeSvgHOC

Resize SVG 盒子模型分析

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

属性 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）

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

    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

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

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

开发调试

• 开发

git clone 

npm i 

npm run start

• 发布

npm run build