react svg pan zoom Download - react svg pan zoom Source Code Download

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 Child وتشغيل الأحداث.
باستخدام الأداة التلقائية ، يمكن للمستخدم التفاعل مع عناصر SVG Child ، وأداء PAN (سحب الصورة) ، والتكبير (النقر المزدوج) ، والتكبير (انقر نقرًا مزدوجًا + Shift).

الوثائق

ابدء
الدعائم
طُرق
API
عارض Autosizer
SVG تحميل ديناميكي

ثَبَّتَ

NPM

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

غزل

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 >

أمثلة الاستخدام

الأساسي - الاستخدام الأساسي لـ <ReactSVGPanZoom> .
المكون غير المنضبط - الاستخدام الأساسي لـ <UncontrolledReactSVGPanZoom> .
JSFIDDLE - هذا عرض تجريبي JSFIDDLE يستخدم حزمة UMD.
CODESANDBOX - هذا هو DOCEDESANDBOX التجريبي.

Changelog

v2.0 - Refactor Project. اتبع هذا الدليل لتعليمات الترحيل.
v2.1 - يضيف setPointOnViewerCenter ، أساليب reset واسم className ، style الدعائم
v2.2 - يقدم أداة auto ، يحسن شريط الأدوات الافتراضي
v2.3 - يضيف دعم أحداث اللمس
v2.4 - يضيف ES: الدعم التالي ، نشر موقع ويب جديد
v2.5 - يضيف preventPanOutside و scaleFactor Props
v2.6 - يقدم مصفوفة التحول التي تقلل من حجم الحزمة بفضل ثلاثة هز ، إصلاحات الحد من المقلاة ، يحل محل روابط شريط الأدوات مع الأزرار ، والتحسينات البسيطة
v2.7 - يضيف ميزة مصغرة ، يضيف دعم Proftypes
v2.8 - يضيف توضيح القصص القصيرة ، وإزالة دعم bower ، ويضيف ميزة Zoom إلى Zoom ، ويصلح الحجم المصغر
v2.9 - إعادة تنفيذ مصغرة وتقديم الدعائم 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 ، وميزة ترقية الحدود ، وميزة إصلاحات الإصلاح
v2.17 - ترقيات DEPS
v2.18 - يقدم toolbarProps.SVGAlignX و toolbarProps.SVGAlignY الدعائم. يضيف تكوين المحاذاة في fitToViewer(SVGAlignX = "left", SVGAlignY = "top") method (#120). ترقيات DEPS.
V3.0 - ترقيات إلى Babel 7 و Storybook 4 ؛ يقدم مكون <UncontrolledReactSVGPanZoom /> ويجعل <ReactSVGPanZoom> مكونًا عديمي الجنسية (باستثناء بعض التحسينات) ؛ يتحرك الدعائم المتعلقة بمنمنمة وشريط الأدوات ، على التوالي في الدعائم miniatureProp و toolbarProp . دليل الترحيل متاح هنا .
V3.1 - ترقيات إلى Storybook 5 و Transformation -Matrix 2 ؛ يعمل على إصلاح بعض مشكلات تكوين بابل
V3.2 - ترقيات DEPS
v3.3 - يضيف دعم Probox Svg Viewbox #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 و Storybook 6 ؛ تحديث الأمثلة والمستندات لرد السنانير
3.11 - يهاجر من الغزل إلى NPM ؛ يستفيد من chrvadala/github-actions ؛ تحديث DEPS.
3.12 - يهاجر إلى GH -sharor ؛ يحسن المستندات ؛ يقلل دليل الهجرة V1 ؛ ترقيات DEPS.
3.13 - إصلاح Doct Doc #218 ؛ يزيل defaultprops depreced ؛ يهاجر إلى القصص القصيرة 8 ؛ ترقيات DEPS. ترقيات تمثيل GH ؛