react svg pan zoom Download - react svg pan zoom Quellcode Download

react svg pan zoom

Website-Daten

v3.13.1

Herunterladen

React-SVG-Pan-Zoom

React-SVG-Pan-Zoom ist eine React-Komponente, die den SVG-Bildern Pan- und Zoomfunktionen hinzufügt. Es hilft, große SVG -Bilder auf kleinem Raum anzuzeigen.

Live -Demo

Verfügbar unter http://chrvadala.github.io/react-svg-pan-zoom/

Merkmale

Diese Komponente kann je nach ausgewähltem Tool in vier verschiedenen Modi funktionieren:

Mit dem Tool kann der Benutzer das Bild verschieben und es innerhalb des Betrachters herumziehen, kann aber nicht mit SVG -Kinderelementen interagieren.
Wenn das Tool zoomen, kann der Benutzer das Bild entweder mit einem Punkt klicken oder einen Bereich auswählen, um den angegebenen Bereich zu vergrößern, aber nicht mit SVG -Elementen zu interagieren.
Mit dem Tool kann der Benutzer nicht mit SVG -untergeordneten Elementen interagieren und Ereignisse auslösen.
Mit dem Tool automatisch kann der Benutzer mit SVG -Elementen interagieren, Pan (das Bild ziehen), zoomen (doppelte Klick), vergrößern (Doppelklick + Schicht).

Dokumentation

Erste Schritte
Requisiten
Methoden
API
Autosizer -Betrachter
SVG dynamisch geladen

Installieren

NPM

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

GARN

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 >

Nutzungsbeispiele

Basic - Grundnutzung von <ReactSVGPanZoom> .
Unkontrollierte Komponente - Grundnutzung von <UncontrolledReactSVGPanZoom> .
JSFIDDLE - Dies ist eine JSFiddle -Demo, die UMD -Bundle verwendet.
CodesAndbox - Dies ist eine Codesandbox -Demo.

Changelog

v2.0 - Projektrefaktor. Befolgen Sie diesen Leitfaden für Migrationsanweisungen.
v2.1 - Fügt setPointOnViewerCenter , reset Methoden und className , style hinzu
v2.2 - Führen Sie Tool auto ein und verbessert die Standard -Symbolleiste
v2.3 - Fügt Touch -Events Support hinzu
V2.4 - Fügt ES hinzu: Nächster Support, neue Website bereitstellen
V2.5 - Fügt preventPanOutside und scaleFactor -Requisiten hinzu
v2.6 - führt die Transformationsmatrix ein, die die Bündelgröße dank drei Schütteln reduziert, das Verhalten des Pan -Limit -Grenzwerts behebt, die Symbolleistenverbindungen durch Schaltflächen, kleinere Verbesserungen ersetzt
v2.7 - fügt eine Miniaturfunktion hinzu, fügt die Support von ProfTypes hinzu
v2.8 - Fügt Storybook -Demo hinzu, entfernen
V2.9 - Miniaturen Sie die Miniatur neu und führen Sie Requisiten miniatureBackground , miniatureHeight , geringfügige Verbesserungen und Fix ein
v2.10 - Einführt Prop disableDoubleClickZoomWithToolAuto
v2.11 - Verbessert Dokumente, aktualisiert DEPS
v2.12 - Exporte Miniatur, um die Anpassung zu ermöglichen
v2.13 - Behebung der Größe der Größe der Größe (Nr. 58), Upgrades DEPS
v2.14 - Fördert Prop scaleFactorOnWheel , Upgrades DEPS
v2.15 - verbessert die autopanische Funktion (#71), fügt scaleFactorMax , scaleFactorMin -Requisiten (#71), Upgrades DEPS hinzu
v2.16 - fügt onPan und onZoom -Rückrufe hinzu, Upgrade von DEPS, fixiert Grenzenfunktionen
v2.17 - Upgrades von DEPs
v2.18 - führt toolbarProps.SVGAlignX und toolbarProps.SVGAlignY Requisiten ein. Fügt Alignment -Konfiguration in fitToViewer(SVGAlignX = "left", SVGAlignY = "top") (#120) hinzu. Upgrades von DEPs.
v3.0 - Upgrades auf Babel 7 und Storybook 4; Führt <UncontrolledReactSVGPanZoom /> -Komponente ein und macht <ReactSVGPanZoom> eine zustandslose Komponente (mit Ausnahme einiger Optimierungen); Verschiebt Requisiten im Zusammenhang mit Miniatur- und Symbolleiste in den miniatureProp und toolbarProp -Requisiten. Migrationsleitfaden finden Sie hier .
v3.1 - Upgrades auf das Storybook 5 und Transformation -Matrix 2; Behebt einige Probleme mit Babel -Konfiguration
v3.2 - Upgrades von DEPs
V3.3 - Fügt SVG ViewBox -Prop -Support #150 hinzu
v3.4 - Aktualisiert DEPS und erhöht die Codequalität (Behebung von Eslintwarnungen)
V3.5 - Griff Rad Event als passiv #158, Upgrades DEPS
v3.6 - fügt einige Unit -Tests hinzu, Fixes #161, Upgrades DEPs
v3.7 - Fügt einige weitere Unit -Tests hinzu, Upgrades DEPs aufrüsten
v3.8 - fügt die Deckungsoption für die fitToViewer -Methode Nr. 167 hinzu, fügt activeToolColor -Eigenschaft #168 hinzu, Upgrades DEPs upgrades
V3.9 - Exportrücke -Symbole und -tasten #192 Exportieren
3.10 - Upgrades Deps; Wandert auf React 17 und Storybook 6; Aktualisiert Beispiele und Dokumente, um Hooks zu reagieren
3.11 - wandert von Garn zu NPM; Nutzt Chrvadala/Github-Actions; Aktualisiert DEPS;
3.12 - wandert zu GH -Sponsor; Verbessert Dokumente; Abschreibungen V1 Migrationsleitfaden; Upgrades von DEPs;
3.13 - Migrationsdokument #218; Entfernt veraltete DefaultProps; Migriert zu Storybook 8; Upgrades von DEPs; Upgrades GH-Actions;