react svg pan zoom下载 - react svg pan zoom源代码下载

react svg pan zoom

网站数据

v3.13.1

下载

React-SVG-Pan-Zoom

React-SVG-Pan-Zoom是一个反应组件，可在SVG图像中添加PAN和缩放功能。它有助于在较小的空间中显示大型SVG图像。

现场演示

可在http://chrvadala.github.io/reaeact-svg-pan-zoom/上找到

特征

该组件可以根据所选工具以四种不同的模式工作：

使用工具盘，用户可以移动图像并将其拖动在查看器中，但无法与SVG子元素进行交互。
使用该工具缩小用户可以单击点单击或选择区域以缩小指定区域，但无法与SVG子元素进行交互。
使用该工具，用户无法与SVG儿童元素和触发事件进行交互。
使用该工具自动，用户可以与SVG子元素进行交互，执行PAN （拖动图像），放大（双击），缩放（双击 + shift）。

文档

入门
道具
方法
API
AutoSizer查看器
SVG动态加载

安装

NPM

npm install --save react-svg-pan-zoom

纱

yarn add react-svg-pan-zoom

UMD

 < script src =" https://unpkg.com/prop-types@15/prop-types.js " > </ script >
< script src =" https://unpkg.com/react-svg-pan-zoom@3 " > </ script >

用法示例

基本- <ReactSVGPanZoom>的基本用法。
不受控制的组件- <UncontrolledReactSVGPanZoom>的基本用法。
JSFIDDLE-这是一个使用UMD捆绑包的JSFIDDLE演示。
codesandbox-这是一个codesandbox演示。

ChangElog

v2.0-项目重构。遵循本指南进行迁移指示。
v2.1-添加setPointOnViewerCenter ， reset方法和className ， style道具
v2.2-引入工具auto ，改进默认工具栏
v2.3-添加触摸事件支持
v2.4-添加ES：下一个支持，部署新网站
v2.5-添加了preventPanOutside和scaleFactor曲折道具
v2.6-介绍转换矩阵，由于三个摇动，固定锅限制行为，可以减少捆绑包大小，用按钮替换工具栏链接
v2.7-添加微型功能，添加了Proptypes支持
v2.8-添加故事书演示，删除鲍尔支持，将捏合到缩放功能，修复微型尺寸
v2.9-重新发明微型并引入道具miniatureBackground ， miniatureHeight ，较小的改进和修复
v2.10-引入prop disableDoubleClickZoomWithToolAuto
v2.11-改进文档，更新DEPS
v2.12-导出微型以允许自定义
v2.13-修复调整大小问题（＃58），升级DEPS
v2.14-介绍道具scaleFactorOnWheel ，升级deps
v2.15-改进Autopan功能（＃71），添加scaleFactorMax ， scaleFactorMin Props（＃71），升级DEPS
v2.16-添加onPan和onZoom回调，升级DEP，修复边界功能
v2.17-升级DEPS
v2.18-介绍toolbarProps.SVGAlignX和toolbarProps.SVGAlignY props。在fitToViewer(SVGAlignX = "left", SVGAlignY = "top")方法（＃120）。升级深度。
v3.0-升级到Babel 7和Storybook 4；引入<UncontrolledReactSVGPanZoom /> component，并制作<ReactSVGPanZoom>一个无状态组件（一些优化除外）；将与微型和工具栏相关的动作分别转移到miniatureProp和toolbarProp Prop中。迁移指南可在此处找到。
v3.1-升级到Storybook 5和Transformation -Matrix 2；解决了一些公告的配置问题
v3.2-升级深度
v3.3-添加SVG Viewbox Prop支持＃150
v3.4-升级深度并提高代码质量（修复ESLINT警告）
v3.5-处理车轮事件作为被动＃158，升级深度
v3.6-添加了一些单元测试，修复＃161，升级deps
v3.7-添加了更多的单位测试，升级DEPS
v3.8-在fitToViewer方法＃167上添加封面选项，添加activeToolColor属性＃168，升级deps
v3.9-导出工具栏图标和按钮＃192
3.10-升级深度；迁移到React 17和Storybook 6；更新示例和文档以反应挂钩
3.11-从纱线迁移到NPM；利用Chrvadala/github-actions；更新deps;
3.12-迁移到GH赞助商；改善文档；弃用V1迁移指南；升级DEP；
3.13-修复迁移文档＃218;删除弃用的默认设备；迁移到故事书8；升级DEP；升级GH-Actions；