react svg pan zoom Download - react svg pan zoom Código fonte download

react svg pan zoom

Dados do site

v3.13.1

Baixar

REACT-SVG-PAN-ZOOM

O React-SVG-PAN-Zoom é um componente React que adiciona recursos de PAN e Zoom às imagens SVG . Ajuda a exibir grandes imagens SVG em um pequeno espaço.

Demoção ao vivo

Disponível em http://chrvadala.github.io/react-svg-pan-zoom/

Características

Este componente pode funcionar em quatro modos diferentes, dependendo da ferramenta selecionada:

Com a panela da ferramenta, o usuário pode mover a imagem e arrastá -la dentro do visualizador, mas não pode interagir com os elementos filho SVG.
Com o zoom da ferramenta, o usuário pode dimensionar a imagem com um clique em ponto ou selecionar uma região para ampliar a área especificada, mas não pode interagir com elementos filho SVG.
Com a ferramenta , o usuário pode interagir com elementos filho SVG e desencadear eventos.
Com a ferramenta automaticamente, o usuário pode interagir com elementos filho SVG, executar o PAN (arrastando a imagem), amplie (clique duas vezes), amplie o zoom (clique duas vezes + shift).

Documentação

Começando
Adereços
Métodos
API
Visualizador de Autosizer
SVG carregado dinamicamente

Instalar

Npm

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

FIO

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 >

Exemplos de uso

Básico - Uso básico de <ReactSVGPanZoom> .
Componente não controlado - Uso básico de <UncontrolledReactSVGPanZoom> .
JSFIDDLE - Esta é uma demonstração JSFiddle que usa um pacote UMD.
Código e caixa - Esta é uma demonstração de códigos e caixa.

Changelog

v2.0 - Refactor do projeto. Siga este guia para instruções de migração.
v2.1 - Adiciona setPointOnViewerCenter , Métodos reset e className , adereços style
v2.2 - Apresenta a ferramenta auto , melhora a barra de ferramentas padrão
v2.3 - adiciona suporte de eventos de toque
v2.4 - Adiciona ES: Próximo suporte, implante um novo site
v2.5 - Adiciona preventPanOutside e scaleFactor adereços
v2.6 - Apresenta a matriz de transformação que reduz o tamanho do pacote graças a três agitamentos, corrige o comportamento do limite da panela, substitui os links da barra de ferramentas por botões, pequenas melhorias
v2.7 - adiciona um recurso em miniatura, adiciona suporte de sinistro
v2.8 - adiciona demonstração do livro de histórias, remova o suporte do bower, adiciona beliscão ao recurso de zoom, corrige o tamanho da miniatura
v2.9 - Reinventa a miniatura e apresenta adereços miniatureBackground , miniatureHeight , pequenas melhorias e correção
v2.10 - apresenta o Prop disableDoubleClickZoomWithToolAuto
v2.11 - melhora os documentos, atualizações
v2.12 - Exporta miniatura para permitir a personalização
v2.13 - Correções redimensione os problemas (#58), atualizações deívantes
v2.14 - Apresenta o Prop scaleFactorOnWheel , atualizações
v2.15 - Melhora o recurso AutoPan (#71), adiciona scaleFactorMax , scaleFactorMin adereços (#71), Upgrades Deps
v2.16 - Adiciona retornos de chamada onPan e onZoom , Upgrade Deps, Fixes Limites Recurso
v2.17 - Atualizações deps
v2.18 - Apresenta acessórios toolbarProps.SVGAlignX e toolbarProps.SVGAlignY . Adiciona configuração de alinhamento no método fitToViewer(SVGAlignX = "left", SVGAlignY = "top") (#120). Atualizações deps.
v3.0 - Atualizações para Babel 7 e Storybook 4; Apresenta <UncontrolledReactSVGPanZoom /> componente e faz <ReactSVGPanZoom> um componente apátrida (exceto por algumas otimizações); Move adereços relacionados à miniatura e barra de ferramentas, respectivamente, nos adereços miniatureProp e toolbarProp . O guia de migração está disponível aqui .
v3.1 - Atualizações no livro de histórias 5 e matriz de transformação 2; Corrige alguns problemas de configuração de Babel
v3.2 - Atualizações deps
v3.3 - adiciona suporte de suporte SVG ViewBox #150
v3.4 - Upgrades deps e aumenta a qualidade do código (fixação de avisos de Eslint)
v3.5 - lida com o evento da roda como passivo nº 158, atualizações
v3.6 - Adiciona alguns testes de unidade, correções #161, atualizações deps
v3.7 - Adiciona mais alguns testes de unidade, atualizações
v3.8 - Adiciona a opção de capa no método fitToViewer #167, adiciona a propriedade activeToolColor #168, atualizações
v3.9 - Exporta ícones e botões da barra de ferramentas #192
3.10 - Upgrades Deps; Migra para React 17 e Storybook 6; Atualiza exemplos e documentos para reagir ganchos
3.11 - migra de fios para NPM; Faz uso de Chrvadala/Github-Actions; Atualizações deps;
3.12 - migra para o patrocinador de GH; Melhora os documentos; Deprecia o guia de migração V1; Atualizações Deps;
3.13 - FIXE a migração Doc #218; Remove o DefaultProps depreciado; Migra para o Storybook 8; Atualizações Deps; Atualizações de Ações GH;