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；