react svg pan zoomダウンロード-ReactSVG react svg pan zoomソースコードのダウンロード

react svg pan zoom

ウェブサイトデータ

v3.13.1

ダウンロード

React-SVG-PAN-ZOOM

React-SVG-PAN-Zoomは、SVG画像にPANおよびズーム機能を追加するReactコンポーネントです。小さなスペースに大きなSVG画像を表示するのに役立ちます。

ライブデモ

http://chrvadala.github.io/react-svg-pan-zoom/で入手可能

特徴

このコンポーネントは、選択したツールに応じて、4つの異なるモードで動作できます。

ツールパンを使用すると、ユーザーは画像を移動してビューア内でドラッグできますが、SVGチャイルド要素と対話することはできません。
ツールをズームすると、ユーザーはポイントクリックするか、領域を選択して指定された領域をズームするが、SVGチャイルド要素と対話することはできません。
ツールなしでは、ユーザーはSVGチャイルドエレメントと対話し、イベントをトリガーできます。
ツールAutoを使用すると、ユーザーはSVGチャイルドエレメントと対話し、 PAN （画像のドラッグ）、ズームイン（ダブルクリック）、ズームアウト（ダブルクリック +シフト）を実行できます。

ドキュメント

はじめる
小道具
方法
API
自動装置ビューアー
動的にロードされた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 >

使用例

BASIC - <ReactSVGPanZoom>の基本的な使用。
制御されていないコンポーネント- <UncontrolledReactSVGPanZoom>の基本的な使用法。
JSFiddle-これは、UMDバンドルを使用するJSFiddleデモです。
CodeSandBox-これはCodeSandBoxデモです。

Changelog

V2.0-プロジェクトリファクタリング。移行指示については、このガイドに従ってください。
V2.1 - setPointOnViewerCenter 、 resetメソッド、 className 、 style小道具を追加
V2.2-ツールautoを導入し、デフォルトのツールバーを改善します
v2.3-タッチイベントサポートを追加します
V2.4 -ESを追加：次のサポート、新しいWebサイトを展開します
v2.5 preventPanOutsideおよびscaleFactorプロップを追加します
V2.6- 3つのシェーキングのおかげでバンドルサイズを縮小する変換マトリックスを導入し、パン制限動作を修正し、ツールバーリンクをボタンに置き換え、マイナーな改善
V2.7-ミニチュア機能を追加し、サポートを追加します
V2.8-ストーリーブックのデモを追加し、バウアーサポートを削除し、ピンチをズーム機能に追加し、ミニチュアサイズを修正します
v2.9-ミニチュアを再発明し、小道具を紹介するminiatureBackground 、 miniatureHeight 、マイナーな改善、修正
V2.10-プロップdisableDoubleClickZoomWithToolAutoを紹介します
v2.11-ドキュメントを改善し、DEPSを更新します
v2.12-カスタマイズを可能にするためにミニチュアを輸出します
v2.13-サイズ変更問題（＃58）を修正し、DEPSをアップグレードします
v2.14 -prop scaleFactorOnWheelを導入し、Depsをアップグレードします
v2.15-オートパン機能（＃71）を改善し、 scaleFactorMax 、 scaleFactorMin Props（＃71）、アップグレードDEPS
v2.16- onPanとonZoomコールバックを追加し、DEPSをアップグレードし、境界機能を修正します
V2.17- DEPSをアップグレードします
v2.18 toolbarProps.SVGAlignXおよびtoolbarProps.SVGAlignY Propsを紹介します。 fitToViewer(SVGAlignX = "left", SVGAlignY = "top")メソッド（＃120）にアライメント構成を追加します。 Depsをアップグレードします。
v3.0-バベル7およびストーリーブック4へのアップグレード。 <UncontrolledReactSVGPanZoom />コンポーネントを紹介し、 <ReactSVGPanZoom>ステートレスコンポーネントにします（いくつかの最適化を除く）。それぞれミニチュアとツールバーに関連する小道具を、それぞれminiaturePropとtoolbarPropプロップの小道具に移動します。移行ガイドはこちらから入手できます。
v3.1 -Storybook 5およびTransformation -Matrix 2へのアップグレード。いくつかのバベル構成の問題を修正します
v3.2 -Depsをアップグレードします
v3.3 -SVGビューボックスプロップサポート＃150を追加します
v3.4- DEPSをアップグレードしてコードの品質を向上させる（ESLINT警告の修正）
v3.5-ホイールイベントをパッシブ＃158として処理し、Depsをアップグレードします
v3.6-いくつかのユニットテストを追加し、＃161を修正し、Depsをアップグレードします
v3.7-さらにいくつかのユニットテストを追加し、DEPSをアップグレードします
v3.8 fitToViewerメソッド＃167にカバーオプションを追加し、 activeToolColorプロパティ＃168を追加し、DEPSをアップグレードします
v3.9-エクスポートツールバーアイコンとボタン＃192
3.10- DEPSをアップグレードします。 React 17およびStorybook 6に移行します。フックを反応するための例とドキュメントを更新します
3.11-糸からNPMに移動します。 Chrvadala/github-actionsを使用します。 DEPSを更新します。
3.12- GHスポンサーに移行します。ドキュメントを改善します。 V1移行ガイドを非難します。 DEPSをアップグレードします。
3.13 -Migration Doc＃218を修正します。非推奨DefaultPropsを削除します。ストーリーブック8に移行します。 DEPSをアップグレードします。 gh-actionsをアップグレードします。