react svg pan zoom - Descargar el código fuente de react svg pan zoom

react svg pan zoom

Datos del sitio web

v3.13.1

Descargar

react-svg-pan-zoom

React-SVG-Pan-Zoom es un componente React que agrega características de PAN e Zoom a las imágenes SVG . Ayuda a mostrar grandes imágenes SVG en un espacio pequeño.

Demostración en vivo

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

Características

Este componente puede funcionar en cuatro modos diferentes según la herramienta seleccionada:

Con la bandeja de herramientas, el usuario puede mover la imagen y arrastrarla dentro del espectador, pero no puede interactuar con los elementos infantiles SVG.
Con el zoom de la herramienta, el usuario puede escalar la imagen, ya sea con un punto, haga clic o seleccione una región para acercar el área especificada, pero no puede interactuar con los elementos infantiles SVG.
Con la herramienta , sin embargo, el usuario puede interactuar con los elementos infantiles SVG y los eventos de activación.
Con la herramienta automáticamente, el usuario puede interactuar con los elementos infantiles SVG, realizar una bandeja (arrastrar la imagen), acercarse (hacer doble clic), hacer zoom (hacer doble clic + cambiar).

Documentación

Empezando
Accesorios
Métodos
API
Visor de autosizador
SVG cargado dinámicamente

Instalar

Npm

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

HILO

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 >

Ejemplos de uso

Básico - Uso básico de <ReactSVGPanZoom> .
Componente no controlado : uso básico de <UncontrolledReactSVGPanZoom> .
JSFIDDLE : esta es una demostración de JSFIDDLE que usa el paquete UMD.
Codesandbox : esta es una demostración de Codesandbox.

Colegio de cambios

V2.0 - Refactor del proyecto. Siga esta guía para las instrucciones de migración.
V2.1 - Agrega setPointOnViewerCenter , Métodos reset y className , accesorios style
v2.2 - Introduce la herramienta auto , mejora la barra de herramientas predeterminada
v2.3 - Agrega soporte de eventos táctiles
V2.4 - Agrega ES: Siguiente soporte, implementa un nuevo sitio web
v2.5 - agrega accesorios preventPanOutside y scaleFactor
v2.6 - Introduce la matriz de transformación que reduce el tamaño del paquete gracias a tres agitación, corrige el comportamiento del límite de la sartén, reemplaza los enlaces de la barra de herramientas con botones, mejoras menores
v2.7 - Agrega la función en miniatura, agrega soporte de proptypes
V2.8 - Agrega demostración de libros de cuentos, eliminar el soporte de la balanza, agrega la característica de pellizco al zoom, arregla el tamaño de la miniatura
V2.9 - Reinventa en miniatura e introduce accesorios miniatureBackground , miniatureHeight , Mejoras menores y fijación
V2.10 - Presenta el Prop disableDoubleClickZoomWithToolAuto
V2.11 - Mejora los documentos, actualizaciones DEPS
V2.12 - Exporta en miniatura para permitir la personalización
V2.13 - Corrección de problemas de cambio de tamaño (#58), actualizaciones DEPS
V2.14 - Introduce Prop scaleFactorOnWheel , actualizaciones DEPS
V2.15 - Mejora la función de AutoPan (#71), agrega scaleFactorMax , scaleFactorMin accesorios (#71), actualizaciones DEPS
V2.16 : agrega devoluciones de llamada onPan y onZoom , Deps de actualización, Función de límites de reparación
v2.17 - actualizaciones DEPS
V2.18 - Introduce toolbarProps.SVGAlignX y toolbarProps.SVGAlignY Props. Agrega la configuración de alineación en el método fitToViewer(SVGAlignX = "left", SVGAlignY = "top") (#120). Actualizaciones DEPS.
V3.0 - Actualizaciones a Babel 7 y Storybook 4; Introduce <UncontrolledReactSVGPanZoom /> componente y hace <ReactSVGPanZoom> un componente sin estado (a excepción de algunas optimizaciones); Mueve accesorios relacionados con la miniatura y la barra de herramientas, respectivamente, en los accesorios miniatureProp y Barprop toolbarProp . La guía de migración está disponible aquí .
V3.1 - Actualizaciones a Storybook 5 y Transformation -Matrix 2; Soluciona algunos problemas de configuración de Babel
v3.2 - actualizaciones DEPS
V3.3 - Agrega SVG ViewBox Prop Support #150
V3.4 - Actualiza Deps y aumenta la calidad del código (fijación de advertencias de Eslint)
V3.5 - Maneja el evento de la rueda como pasivo #158, actualizaciones DEPS
V3.6 - Agrega algunas pruebas unitarias, correcciones #161, actualizaciones DEPS
v3.7 - Agrega algunas pruebas unitarias más, actualizaciones DEPS
v3.8 - Agrega la opción de cubierta en el método fitToViewer #167, agrega la propiedad activeToolColor #168, actualizaciones DEPS
V3.9 - Exportaciones de iconos y botones de la barra de herramientas #192
3.10 - Actualizaciones DEPS; Migra para reaccionar 17 y Storybook 6; Actualiza ejemplos y documentos para reaccionar ganchos
3.11 - Migra de hilo a NPM; Utiliza Chrvadala/GitHub-Actions; Actualizaciones DEPS;
3.12 - migra al patrocinador de GH; Mejora los documentos; Guía de migración V1 de depreces; Actualizaciones DEPS;
3.13 - Corrección de la migración Doc #218; Elimina los propios propios desapercibidos; Migra al libro de cuentos 8; Actualizaciones DEPS; Actualizaciones de GH-Actions;