Unduh react svg pan zoom - react svg pan zoom Source Code Unduh

react svg pan zoom

Data situs web

v3.13.1

Unduh

react-svg-pan-zoom

React-SVG-PAN-Zoom adalah komponen reaksi yang menambahkan fitur PAN dan ZOOM ke gambar SVG . Ini membantu menampilkan gambar SVG besar di ruang kecil.

Demo langsung

Tersedia di http://chrvadala.github.io/react-svg-pan-zoom/

Fitur

Komponen ini dapat bekerja dalam empat mode berbeda tergantung pada alat yang dipilih:

Dengan panci alat, pengguna dapat memindahkan gambar dan menyeretnya di dalam penampil, tetapi tidak dapat berinteraksi dengan elemen anak SVG.
Dengan alat zoom, pengguna dapat mengukur gambar baik dengan titik klik atau memilih wilayah untuk memperbesar area yang ditentukan, tetapi tidak dapat berinteraksi dengan elemen anak SVG.
Dengan alat tidak ada pengguna yang dapat berinteraksi dengan elemen anak SVG dan memicu peristiwa.
Dengan alat Auto, pengguna dapat berinteraksi dengan elemen anak SVG, melakukan PAN (menyeret gambar), memperbesar (klik ganda), zoom out (klik ganda + shift).

Dokumentasi

Memulai
Alat peraga
Metode
API
Autosizer Viewer
SVG dimuat secara dinamis

Memasang

NPM

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

BENANG

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 >

Contoh penggunaan

Dasar - Penggunaan Dasar <ReactSVGPanZoom> .
Komponen yang tidak terkendali - Penggunaan Dasar <UncontrolledReactSVGPanZoom> .
JSFiddle - Ini adalah demo JSFiddle yang menggunakan bundel UMD.
CODESANDBOX - Ini adalah demo kode dan kotak.

Changelog

V2.0 - Refactor Proyek. Ikuti panduan ini untuk instruksi migrasi.
V2.1 - Menambahkan setPointOnViewerCenter , reset Metode dan className , style Props
V2.2 - Memperkenalkan alat auto , meningkatkan toolbar default
v2.3 - Menambahkan Dukungan Acara Sentuh
V2.4 - Menambahkan ES: Dukungan Berikutnya, Menerus Situs Web Baru
v2.5 - Menambahkan preventPanOutside dan alat peraga scaleFactor
v2.6 - Memperkenalkan transformasi -matrix yang mengurangi ukuran bundel berkat tiga guncangan, perbaikan perilaku batas panci, mengganti tautan bilah alat dengan tombol, perbaikan kecil
v2.7 - Menambahkan fitur miniatur, menambahkan dukungan proptypes
v2.8 - Menambahkan demo buku cerita, menghapus dukungan bower, menambahkan fitur Pinch to Zoom, memperbaiki ukuran miniatur
v2.9 - menciptakan kembali miniatur dan memperkenalkan miniatureBackground Props, miniatureHeight , Minor Perbaikan & Perbaikan
v2.10 - Memperkenalkan prop disableDoubleClickZoomWithToolAuto
v2.11 - meningkatkan dokumen, pembaruan deps
V2.12 - Miniatur Ekspor untuk memungkinkan kustomisasi
V2.13 - Memperbaiki Masalah Ubah Ulang (#58), Upgrade DEP
v2.14 - Memperkenalkan prop scaleFactorOnWheel , upgrade deps
V2.15 - Meningkatkan fitur autopan (#71), menambahkan scaleFactorMax , scaleFactorMin props (#71), DEP peningkatan DEP
v2.16 - Menambahkan panggilan balik onPan dan onZoom , meningkatkan DEP, fitur batas perbatasan
v2.17 - Dep peningkatan
v2.18 - Memperkenalkan toolbarProps.SVGAlignX dan toolbarProps.SVGAlignY props. Menambahkan konfigurasi pelurusan di fitToViewer(SVGAlignX = "left", SVGAlignY = "top") metode (#120). Upgrade DEPS.
V3.0 - Peningkatan ke Babel 7 dan Storybook 4; Memperkenalkan komponen <UncontrolledReactSVGPanZoom /> dan membuat <ReactSVGPanZoom> komponen tanpa kewarganegaraan (kecuali untuk beberapa optimisasi); Pindah alat peraga yang terkait dengan miniatur dan toolbar, masing -masing ke miniatureProp dan alat peraga toolbarProp . Panduan Migrasi tersedia di sini .
V3.1 - Peningkatan ke Storybook 5 dan Transformation -Matrix 2; Memperbaiki beberapa masalah konfigurasi babel
v3.2 - Dep peningkatan
V3.3 - Menambahkan SVG ViewBox Prop Support #150
V3.4 - Upgrade DEP dan Meningkatkan Kualitas Kode (Memperbaiki Peringatan Eslint)
V3.5 - Menangani Acara Roda sebagai Pasif #158, Upgrade Deps
v3.6 - Menambahkan beberapa tes unit, perbaikan #161, peningkatan deps
V3.7 - Menambahkan beberapa tes unit lagi, DEP upgrade
V3.8 - Menambahkan opsi penutup pada metode fitToViewer #167, menambahkan properti activeToolColor #168, Dep.
V3.9 - Ikon dan Tombol Toolbar Ekspor #192
3.10 - Upgrade DEP; Bermigrasi untuk bereaksi 17 dan buku cerita 6; Memperbarui contoh dan dokumen untuk bereaksi kait
3.11 - Bermigrasi dari benang ke NPM; Memanfaatkan aksi chrvadala/github; Pembaruan deps;
3.12 - bermigrasi ke sponsor GH; Meningkatkan dokumen; Panduan Migrasi V1 yang Oles; Peningkatan deps;
3.13 - Memperbaiki Migrasi Doc #218; Menghapus defaultprops yang sudah usang; Bermigrasi ke Storybook 8; Peningkatan deps; Meningkatkan aksi GH;