1
하나의 캔버스 요소 (수동으로 만들어진 픽셀 값으로 채워져 있고 기존 이미지가 없습니다)가 있습니다. 캔버스에 줌/팬 컨트롤을 구현하고 싶습니다. 기존 라이브러리가 있습니까? 그걸하기 위해?단일 캔버스 줌/팬을 구현하는 방법
고맙습니다.
A
답변
4
당신은 아마 만 줌을 해결하고 특히 이동하는 라이브러리를 찾을 수 없습니다,하지만 당신은 EaselJS 또는 KineticJS으로 일반적인 캔버스 라이브러리를 사용하는 경우는 구현하기가 쉽다.
이 경우 "뷰포트"(DOM에 추가하는 캔버스)와 "드로잉"(뷰포트보다 클 수 있음)을 나타내는 캔버스를 가질 수 있습니다. 그런 다음 배율 인수와 변환을 사용하여 뷰포트 캔버스에 "그리기"캔버스를 그립니다. 그러면 스케일링 및 변환 값을 마우스 휠 (또는 터치 장치의 핀치)과 같은 마우스 상호 작용으로 변경하고 클릭하고 끌 수 있습니다.
라이브러리를 사용하는 경우 더 적은 코드와 더 읽기 쉬운 코드를 작성하게됩니다. 라이브러리를 사용하면 캔버스에서 "객체"를 쉽게 추적하고 조작 할 수 있습니다. 또한 마우스 상호 작용을 단순화하기 때문에 체크 아웃하는 것이 좋습니다.
기존 라이브러리에 대해서는 잘 모르겠지만 분리 된 캔버스에 복사본을 만든 다음 표시하려는 부분 만'.drawImage'라고 생각할 것입니다. 또는'overflow : hidden'을 사용하여 div에 캔버스를 넣고 CSS의 너비와 높이를 변경하여 캔버스를 "확대/축소"하고 div의 위치를 이동하여 팬을 이동합니다. – MrOBrian