react svg pan zoom Download - react svg pan zoom Code source Télécharger

react svg pan zoom

Données du site Web

v3.13.1

Télécharger

react-svg-pan-zoom

React-Svg-Pan-Zoom est un composant React qui ajoute des fonctionnalités PAN et zoom aux images SVG . Il aide à afficher de grandes images SVG dans un petit espace.

Démo en direct

Disponible sur http://chrvadala.github.io/react-svg-pan-zoom/

Caractéristiques

Ce composant peut fonctionner dans quatre modes différents en fonction de l'outil sélectionné:

Avec l' outils, l'utilisateur peut déplacer l'image et le faire glisser dans la visionneuse, mais ne peut pas interagir avec les éléments enfants SVG.
Avec le zoom de l'outil, l'utilisateur peut mettre à l'échelle l'image avec un clic point ou sélectionner une région pour zoomer la zone spécifiée, mais ne peut pas interagir avec les éléments enfants SVG.
Avec l'outil , l'utilisateur peut interagir avec les éléments enfants SVG et déclencher des événements.
Avec l'outil automatique, l'utilisateur peut interagir avec les éléments enfants SVG, effectuez Pan (glisser l'image), zoomer (double clic), zoomer (double click + shhif).

Documentation

Commencer
Accessoires
Méthodes
API
Visionneuse AutoSizer
SVG chargé dynamiquement

Installer

NPM

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

FIL

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 >

Exemples d'utilisation

Basique - utilisation de base de <ReactSVGPanZoom> .
Composant incontrôlé - Utilisation de base de <UncontrolledReactSVGPanZoom> .
JSFiddle - Il s'agit d'une démo JSFiddle qui utilise UMD Bundle.
CodeandBox - Il s'agit d'une démo de codes et boîte.

Changelog

v2.0 - Refactor de projet. Suivez ce guide pour les instructions de migration.
v2.1 - ajoute setPointOnViewerCenter , reset les méthodes et className , accessoires style
v2.2 - introduit l'outil auto , améliore la barre d'outils par défaut
v2.3 - Ajoute le support des événements tactiles
v2.4 - Ajoute ES: support suivant, déploie un nouveau site Web
v2.5 - Ajoute des accessoires preventPanOutside et scaleFactor
v2.6 - introduit la matrice de transformation qui réduit la taille du bundle grâce à trois tremblements, corrige le comportement de limite de casserole, remplace les liens de la barre d'outils avec des boutons, des améliorations mineures
v2.7 - Ajoute une fonctionnalité miniature, ajoute la prise en charge de propypes
v2.8 - Ajoute une démo de livres de contes, supprimer la prise en charge de Bower, ajoute une pincée à la fonction de zoom, fixe la taille miniature
v2.9 - réinvente les miniatures et introduire des accessoires miniatureBackground , miniatureHeight , améliorations mineures et corrects
v2.10 - Présentation de propuls disableDoubleClickZoomWithToolAuto
v2.11 - améliore les documents, met à jour les DEP
v2.12 - exporte la miniature pour permettre la personnalisation
v2.13 - résoudre les problèmes de redimensionnement (# 58), améliore les DEP
v2.14 - introduit le scale scaleFactorOnWheel , améliore les DEP
V2.15 - Améliore la fonction Autopan (# 71), ajoute scaleFactorMax , scaleFactorMin PRESS (# 71), améliore les DEPS
v2.16 - Ajoute des rappels onPan et onZoom , améliore les DEP, fixe la fonctionnalité des limites
v2.17 - améliore les DEP
v2.18 - Présentation des bornes toolbarProps.SVGAlignX et toolbarProps.SVGAlignY . Ajoute une configuration d'alignement dans fitToViewer(SVGAlignX = "left", SVGAlignY = "top") (# 120). Améliore les DEP.
V3.0 - Mises à niveau de Babel 7 et Storybook 4; Introduit <UncontrolledReactSVGPanZoom /> composant et fait <ReactSVGPanZoom> un composant apatride (sauf pour certaines optimisations); Déplace les accessoires liés à la miniature et à la barre d'outils, respectivement dans les accessoires miniatureProp et toolbarProp . Le guide de migration est disponible ici .
V3.1 - Mises à niveau du livre de contes 5 et de la transformation-matrice 2; Corrige certains problèmes de configuration de Babel
V3.2 - MODIFICATIONS DEPS
V3.3 - Ajoute la prise en charge de SVG Viewbox Prop # 150
V3.4 - Mménage des DEP et augmente la qualité du code (fixer les avertissements d'Eslint)
v3.5 - gère l'événement de roue comme passif # 158, améliore les DEPS
V3.6 - Ajoute quelques tests unitaires, corrects # 161, améliore les DEP
V3.7 - Ajoute d'autres tests unitaires, améliore les DEP
V3.8 - Ajoute une option de couverture sur la méthode fitToViewer # 167, ajoute une propriété activeToolColor # 168, mises à niveau Deps
V3.9 - Exportation des icônes et boutons de la barre d'outils # 192
3.10 - Amélioration des DEP; Migre vers React 17 et Storybook 6; Met à jour les exemples et les documents pour réagir les crochets
3.11 - migre du fil vers le NPM; Utilise des actions chrvadala / github; MISE À JOUR DEPS;
3.12 - migre vers le sponsor GH; Améliore les documents; Guide de migration V1 dépréace; Améliore les DEP;
3.13 - Correction de la migration Doc # 218; Supprime lesprops defaultprops obsolètes; Migre vers le livre de contes 8; Améliore les DEP; Améliore les actions GH;