comment faire défiler la toile avec paperjs?

Question

Je n'ai pas été en mesure de faire défiler la toile déplacer le papier entier horizontalement et verticalement.

C'est possible?

<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

Vous pouvez utiliser paper.view.scrollBy(new Point(x, y)) pour faire défiler la touteView

Voici quelques exemples de code:

// 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) 
}; 

Et voici un Sketch pour cela (faites glisser votre souris sur la toile)

---

Note: Vous n'avez pas besoin d'inclure à la fois paper-core.js et paper-full.js. Utilisez l'un ou l'autre, selon que vous avez besoin du support PaperScript (paper-full.js inclut aussi PS).