javascript - 如何使用 paperjs 滚动 Canvas ？

Question

我无法滚动 Canvas 并水平移动整张纸 垂直。

可能吗？

<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为此(在 Canvas 上拖动鼠标)

<小时/>

旁注:您不需要同时包含 paper-core.js 和 paper-full.js。使用其中之一，具体取决于您是否也需要 PaperScript 支持(paper-full.js 也包括 PS)。