react svg pan zoom 다운로드 -Rect react svg pan zoom 소스 코드 다운로드

react svg pan zoom

웹사이트 데이터

v3.13.1

다운로드

React-SVG-Pan-Zoom

React-SVG-Pan-Zoom은 SVG 이미지 에 PAN 및 Zoom 기능을 추가하는 React 구성 요소입니다. 작은 공간에 큰 SVG 이미지를 표시하는 데 도움이됩니다.

라이브 데모

http://chrvadala.github.io/react-svg-pan-zoom/에서 구할 수 있습니다.

특징

이 구성 요소는 선택한 도구에 따라 4 가지 모드로 작동 할 수 있습니다.

도구 팬을 사용하면 사용자는 이미지를 이동하여 시청자 내에서 드래그 할 수 있지만 SVG 하위 요소와 상호 작용할 수는 없습니다.
도구를 확대 하면 사용자는 포인트 클릭으로 이미지를 스케일링하거나 지정된 영역을 확대하기 위해 영역을 선택할 수 있지만 SVG 하위 요소와 상호 작용할 수는 없습니다.
이 도구 없음을 사용하면 사용자는 SVG Child 요소와 상호 작용하고 이벤트를 트리거 할 수 있습니다.
도구 자동 으로 사용자는 SVG 하위 요소와 상호 작용하고 PAN (이미지 드래그)을 수행하고 (더블 클릭) 를 확대 하고 축소 (Double Click + Shift)를 수행 할 수 있습니다.

선적 서류 비치

시작하기
소품
행동 양식
API
자동화기 시청자
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- UMD 번들을 사용하는 JSFiddle 데모입니다.
Codesandbox- 코드 및 박스 데모입니다.

changelog

v2.0- 프로젝트 리팩터. 마이그레이션 지침은이 안내서를 따르십시오.
v2.1- setPointOnViewerCenter , reset 메소드 및 className , style 소품 추가
v2.2- 도구 auto 소개하고 기본 도구 모음을 향상시킵니다
v2.3- 터치 이벤트 지원을 추가합니다
v2.4- 추가 : 다음 지원, 새 웹 사이트를 배포하십시오
v2.5- preventPanOutside 및 scaleFactor Props를 추가합니다
v2.6- 세 가지 흔들림 덕분에 번들 크기를 줄이고, 팬 제한 동작을 수정하고, 툴바 링크를 버튼으로 대체, 사소한 개선 사항을 대체하는 변환 매트릭스를 소개합니다.
v2.7- 소형 기능을 추가하고 PropTypes 지원을 추가합니다
v2.8- 스토리 북 데모 추가, 바워 지지대 제거, 핀치 추가 기능, 소형 크기 수정
v2.9- 소형 소형 소형 소개 miniatureBackground , miniatureHeight , 사소한 개선 및 수정을 소개합니다.
v2.10- 소개 disableDoubleClickZoomWithToolAuto 를 소개합니다
v2.11- 문서를 개선, 업데이트 Dep
v2.12- 사용자 정의를 허용하기 위해 미니어처를 수출합니다
v2.13- 수정 문제 크기 조정 문제 (#58), 업그레이드 dep
v2.14- 소개 scaleFactorOnWheel , 업그레이드 Dep
v2.15 -Autopan Feature (#71), scaleFactorMax , scaleFactorMin Props (#71), 업그레이드 DEP를 추가합니다.
v2.16- onPan 및 onZoom 콜백 추가, 업그레이드 DEP, 수정 경계 기능
v2.17- 업그레이드 dep
v2.18- toolbarProps.SVGAlignX 및 toolbarProps.SVGAlignY Props를 소개합니다. fitToViewer(SVGAlignX = "left", SVGAlignY = "top") 메소드 (#120)에서 정렬 구성을 추가합니다. 업그레이드 DEP.
v3.0- Babel 7 및 Storybook 4로의 업그레이드; <UncontrolledReactSVGPanZoom /> 구성 요소를 소개하고 <ReactSVGPanZoom> 무국적 구성 요소로 만듭니다 (일부 최적화 제외). 미니어처 및 도구 모음과 관련된 소품을 각각 miniatureProp 및 toolbarProp 소품으로 이동합니다. 마이그레이션 가이드는 여기에서 제공됩니다 .
v3.1- Storybook 5 및 Transformation -Matrix 2로의 업그레이드; Babel 구성 문제를 수정합니다
v3.2- 업그레이드 dep
v3.3- SVG Viewbox Prop Support #150을 추가합니다
v3.4- DEP 업그레이드 및 코드 품질 증가 (Eslint 경고 수정)
v3.5- 휠 이벤트를 수동 #158로 핸들링, DEP 업그레이드
v3.6- 일부 단위 테스트, 수정 #161, 업그레이드 DEP 추가
v3.7- 더 많은 단위 테스트를 추가하고, 업그레이드 DEP
v3.8- fitToViewer Method #167, activeToolColor 속성 #168을 추가하여 Deps를 업그레이드하는 커버 옵션 추가
v3.9- 도구 모음 아이콘과 버튼 #192 내보내기
3.10- 업그레이드 DEP; 반응 17 및 스토리 북 6으로 마이그레이션합니다. 고리 반응에 대한 예제 및 문서를 업데이트합니다
3.11- 원사에서 NPM으로 이동; Chrvadala/github-actions를 사용합니다. 업데이트 DEP;
3.12- GH 스폰서로 마이그레이션; 문서를 개선합니다. V1 마이그레이션 가이드를 사용하지 않습니다. 업그레이드 DEP;
3.13 -MIGRATION DOC #218 수정; 더 이상 사용되지 않은 기본 프로 롭을 제거합니다. Storybook 8으로 마이그레이션합니다. 업그레이드 DEP; GH- 액션 업그레이드;