내가 제대로 질문을 이해한다면 fabric.js

Question

에서 뷰포트를 만드는 방법 , 가장 쉬운 방법은 매우 큰 캔버스 객체 (창보다 큼)를 만들어 부모 컨테이너 안에 배치하는 것입니다. 상위 컨테이너의 크기를 원하는 창의 크기와 같게 설정 한 다음 컨테이너에 overflow: hidden;을 선언하십시오.

일단 설정되면 jQuery의 draggable과 같은 것을 사용하여 마우스 이벤트를 처리 할 수 ​​있습니다. 그래도 문제가 해결되지 않으면 캔버스의 position 속성을 수정하거나 창 안의 캔버스 주변을 패닝 시뮬레이션하도록 margins을 조정해야한다는 것이 핵심 아이디어입니다.

물론이 접근법은 유한 캔버스 크기를위한 것입니다. 무한 작업 영역을 제공하려면 캔버스의 context.translate 속성을 수정하는 것이 좋습니다. 그러나 이것이 fabric.js에서 잘 작동하지 않을 것이라고 생각합니다.

Answer 1

를 사용하여, 바람직하게는 캔버스를 사용하고 (스크롤 뷰를 만드는)는 가시 영역, 더 큰 객체에 창을 만드는 방법 fabric.js