ดาวน์โหลด react svg pan zoom - react svg pan zoom SORCIDE DOWNOADAEL

react svg pan zoom

ข้อมูลเว็บไซต์

v3.13.1

ดาวน์โหลด

react-svg-pan-zoom

React-SVG-PAN-Zoom เป็นส่วนประกอบของปฏิกิริยาที่เพิ่มคุณสมบัติ PAN และ ZOOM ให้กับ ภาพ SVG ช่วยในการแสดงภาพ SVG ขนาดใหญ่ในพื้นที่ขนาดเล็ก

การสาธิตสด

มีให้ที่ http://chrvadala.github.io/react-svg-pan-zoom/

คุณสมบัติ

ส่วนประกอบนี้สามารถทำงานในสี่โหมดที่แตกต่างกันขึ้นอยู่กับเครื่องมือที่เลือก:

ด้วยเครื่องมือ PAN ผู้ใช้สามารถย้ายภาพและลากไปรอบ ๆ ภายในตัวชมได้ แต่ไม่สามารถโต้ตอบกับองค์ประกอบลูก SVG ได้
ด้วยเครื่องมือ ซูม ผู้ใช้สามารถปรับขนาดภาพได้ด้วยการคลิกจุดหรือเลือกภูมิภาคเพื่อซูมพื้นที่ที่ระบุ แต่ไม่สามารถโต้ตอบกับองค์ประกอบลูก SVG ได้
ด้วยเครื่องมือ ที่ไม่มี ผู้ใช้สามารถโต้ตอบกับองค์ประกอบลูก SVG และเหตุการณ์ทริกเกอร์
ด้วยเครื่องมือ อัตโนมัติ ผู้ใช้สามารถโต้ตอบกับองค์ประกอบลูก SVG ดำเนินการ PAN (ลากภาพ), ซูมเข้า (ดับเบิลคลิก), ซูมออก (ดับเบิลคลิก + กะ)

เอกสาร

เริ่มต้น
อุปกรณ์ประกอบฉาก
วิธีการ
API
เครื่องตัดอัตโนมัติ Viewer
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> ได้ควบคุม reactsvgpanzoom>
JSFIDDLE - นี่คือการสาธิต JSFIDDLE ที่ใช้ Bundle UMD
CodeSandBox - นี่คือการสาธิต CodesandBox

การเปลี่ยนแปลง

v2.0 - โครงการ refactor ทำตามคำแนะนำนี้สำหรับคำแนะนำการย้ายถิ่น
v2.1 - เพิ่ม setPointOnViewerCenter , วิธี reset และ className , อุปกรณ์ประกอบฉาก style
v2.2 - แนะนำเครื่องมือ auto ปรับปรุงแถบเครื่องมือเริ่มต้น
v2.3 - เพิ่มการสนับสนุนกิจกรรมสัมผัส
v2.4 - เพิ่ม ES: การสนับสนุนถัดไปปรับใช้เว็บไซต์ใหม่
v2.5 - เพิ่ม preventPanOutside และ scaleFactor Props
v2.6 - แนะนำการแปลงเมทริกซ์ที่ลดขนาดชุดด้วยการสั่นสะเทือนสามตัวแก้ไขพฤติกรรมขีด จำกัด ของแพนแทนที่ลิงก์แถบเครื่องมือด้วยปุ่มการปรับปรุงเล็กน้อย
v2.7 - เพิ่มคุณสมบัติขนาดเล็กเพิ่มการรองรับ Proptypes
v2.8 - เพิ่มการสาธิตนิทานลบการสนับสนุน Bower เพิ่มคุณสมบัติการซูมเพื่อซูมแก้ไขขนาดขนาดเล็ก
v2.9 - reinvents 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 และ Storybook 4; แนะนำส่วนประกอบ <UncontrolledReactSVGPanZoom /> และทำให้ <ReactSVGPanZoom> ส่วนประกอบไร้สัญชาติ (ยกเว้นการเพิ่มประสิทธิภาพบางอย่าง); เคลื่อนย้ายอุปกรณ์ประกอบฉากที่เกี่ยวข้องกับแถบขนาดเล็กและแถบเครื่องมือตามลำดับไปยังอุปกรณ์ประกอบ miniatureProp และแถบ toolbarProp คู่มือการโยกย้ายมีอยู่ที่นี่
v3.1 - การอัพเกรดเป็นนิทาน 5 และการแปลงเมทริกซ์ 2; แก้ไขปัญหาการกำหนดค่า Babel บางอย่าง
v3.2 - การอัพเกรด deps
v3.3 - เพิ่ม SVG Viewbox Prop Support #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 -sponsor; ปรับปรุงเอกสาร คู่มือการย้ายถิ่นฐาน v1; อัพเกรด deps;
3.13 - แก้ไขการโยกย้าย DOC #218; ลบ defaultprops ที่เลิกใช้แล้ว; ย้ายไปยังนิทาน 8; อัพเกรด deps; อัพเกรดการกระทำ GH;