react svg pan zoom Download - react svg pan zoom

react svg pan zoom

Данные веб-сайта

v3.13.1

Скачать

React-svg-pan-Zoom

React-SVG-Pan-Zoom -это компонент React, который добавляет функции PAN и Zoom к изображениям SVG . Это помогает отображать большие изображения SVG в небольшом пространстве.

Живая демонстрация

Доступно по адресу http://chrvadala.github.io/react-svg-pan-zoom/

Функции

Этот компонент может работать в четырех разных режимах в зависимости от выбранного инструмента:

С помощью инструментальной сковороды пользователь может переместить изображение и перетащить его внутри зрителя, но не может взаимодействовать с детскими элементами SVG.
При масштабировании инструмента пользователь может масштабировать изображение либо с помощью точного щелчка, либо выбрать область для масштабирования указанной области, но не может взаимодействовать с детскими элементами SVG.
С инструментом нет, пользователь может взаимодействовать с детскими элементами SVG и запускает события.
С помощью инструмента Auto пользователь может взаимодействовать с детскими элементами SVG, выполнить PAN (перетаскивание изображения), увеличить (двойной щелчок), увеличить (двойной щелчок + shift).

Документация

Начиная
Реквизит
Методы
API
Autosizer Viewer
SVG динамически загружен

Установить

Npm

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

Пряжа

yarn add react-svg-pan-zoom

Герметичный

 < script src =" https://unpkg.com/prop-types@15/prop-types.js " > </ script >
< script src =" https://unpkg.com/react-svg-pan-zoom@3 " > </ script >

Примеры использования

Основное - базовое использование <ReactSVGPanZoom> .
Неконтролируемый компонент - Основное использование <UncontrolledReactSVGPanZoom> режима
JSFIDDLE - это демонстрация JSFIDDLE, которая использует Bundle UMD.
CodeSandbox - это демонстрация CodeSandbox.

Изменение

v2.0 - Рефактор проекта. Следуйте этому руководству для инструкций по миграции.
v2.1 - добавляет setPointOnViewerCenter , reset методов и className , style реквизита
v2.2 - Представлен инструмент auto , улучшает панель инструментов по умолчанию
v2.3 - добавляет поддержку событий Touch
v2.4 - добавляет ES: Next Support, разверните новый веб -сайт
v2.5 - Добавляет реквизит preventPanOutside и scaleFactor
v2.6 - вводит матрицу преобразования, которая уменьшает размер пакета благодаря трем встряхиванию, исправляет поведение ограничения PAN, заменяет ссылки на панели инструментов на кнопки, незначительные улучшения
v2.7 - добавляет миниатюрную функцию, добавляет поддержку Proptypes
v2.8 - Добавляет демонстрацию сборника рассказов, удалить поддержку Bower, добавляет функцию Щетки к масштабированию, исправляет миниатюрный размер
v2.9 - Revents Miniature и ввести miniatureBackground , miniatureHeight , незначительные улучшения и исправление
v2.10 - представляет Prop disableDoubleClickZoomWithToolAuto
v2.11 - улучшает документы, обновления DEPS
v2.12 - экспорт миниатюры, чтобы разрешить настройку
v2.13 - Исправляет проблемы с изменением размера (#58), обновления DEPS
v2.14 - вводит Prop scaleFactorOnWheel , обновления DEPS
v2.15 - Улучшает функцию AutoPan (#71), добавляет scaleFactorMax , scaleFactorMin Props (#71), обновления DEPS
v2.16 - добавляет обратные вызовы onPan и onZoom , обновлять DEPS, исправления границ функции
v2.17 - обновления DEPS
v2.18 - представляет toolbarProps.SVGAlignX и toolbarProps.SVGAlignY реквизиты. Добавляет конфигурацию выравнивания в fitToViewer(SVGAlignX = "left", SVGAlignY = "top") (#120). Обновления DEPS.
v3.0 - обновления до Babel 7 и Soursebook 4; Представляет <UncontrolledReactSVGPanZoom /> компонент и делает <ReactSVGPanZoom> компонент без сохранения (за исключением некоторых оптимизаций); Перемещает реквизиты, связанные с миниатюрной панелью и панелью инструментов, соответственно, в реквизит miniatureProp и toolbarProp . Руководство по миграции доступно здесь .
v3.1 - Обновления до сборника рассказов 5 и трансформации -матрица 2; Исправляет некоторые проблемы с конфигурацией вавилоны
v3.2 - обновления DEPS
v3.3 - добавляет поддержку SVG Viewbox Prop #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 и сборник рассказов 6; Обновления примеров и документов для реагирования крючков
3.11 - мигрирует от пряжи в NPM; Использует действия Chrvadala/Github; Обновления DEPS;
3.12 - мигрирует в Спонсор Г.Г; Улучшает документы; Оправдывает руководство по миграции V1; Модернизации DEPS;
3.13 - Исправляет миграционный документ № 218; Удаляет устаревшие по умолчанию; Мигрирует в сборник рассказов 8; Модернизации DEPS; Модернизации GH-фактов;