paperjs로 캔버스를 스크롤하는 방법은 무엇입니까?

Question

캔버스 전체를 가로로 이동하고 세로로 스크롤 할 수 없었습니다.

가능합니까?

<script type="text/javascript" src="~/Scripts/PaperJS/paper-full.js"></script> 

<script type="text/javascript" src="~/Scripts/PaperJS/paper-core.js"></script> 

<script> 
    $(document).ready(function() { 
     var canvas = document.getElementById('odbCanvas'); 
     paper.setup(canvas); 
     var path = new paper.Path(); 
     path.strokeColor = 'white'; 
     var start = new paper.Point(100, 100); 
     path.moveTo(start); 

     path.lineTo(start.add(0,40)); 
     path.lineTo(start.add(40,40)); 
     path.lineTo(start.add(40,0)); 
     path.lineTo(start.add(0,0)); 

     paper.view.draw(); 

     path.on('mousedrag', function (event) { 
      this.position = event.point; 
     }); 
    }); 
</script> 

Answer 1

당신은 스크롤 paper.view.scrollBy(new Point(x, y))를 사용할 수있는 전체View

여기에 몇 가지 예제 코드입니다 : 여기

// Draw a Rectangle for reference 
var rect = new Path.Rectangle(new Point(200, 100), new Point(50, 50)) 
rect.strokeColor = 'black' 
rect.strokeWidth = 1 

// Create a Tool so we can listen for events 
var toolPan = new paper.Tool() 
toolPan.activate() 

// On drag, scroll the View by the difference between mousedown 
// and mouseup 
toolPan.onMouseDrag = function (event) { 
    var delta = event.downPoint.subtract(event.point) 
    paper.view.scrollBy(delta) 
}; 

그리고이 (캔버스에 마우스를 드래그)

이것에 대한 Sketch입니다

---

사이드 노트 : paper-core.js와 paper-full.js를 모두 포함 할 필요가 없습니다. PaperScript 지원이 필요한지 여부에 따라 둘 중 하나를 사용하십시오 (paper-full.js에는 PS도 포함됨).