如何在不使用PaperScript的情况下平移PaperJS

如何解决如何在不使用PaperScript的情况下平移PaperJS

参考 How to pan using paperjs 我正在尝试平底锅。

但这仅对我有效，当我使用PaperScript时，对我来说无效，而当我在常规JavaScript中使用它时，它将停止工作。

var canvas = document.querySelector('#myCanvas');
paper.install(window);

window.onload = function() {
  paper.setup(canvas);
  
  var myCircle = new Path.Circle(new Point(100,70),50);
  myCircle.fillColor = 'black';

  var toolPan = new paper.Tool();
  toolPan.onMouseDrag = function (event) {
      var offset = event.downPoint - event.point;
      // console.log(offset);
      paper.view.center = paper.view.center + offset;
  };

  view.draw();
}

html,body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

canvas[resize] {
    width: 100%;
    height: 100%;
}

<canvas id="myCanvas" resize></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>

注销到控制台的偏移量会告诉我它不能减去这些点。在PaperScript中，完全一样的效果很好，但是对于我的项目，我必须使其在常规JavaScript中起作用。

解决方法

在PaperScript中，您可以在Point实例上使用数学运算符，但是无法在JavaScript中执行此操作，因此必须使用相应的方法。
point1 + point2 => point1.add(point2)，等等...

这是更正的代码：

var canvas = document.querySelector('#myCanvas');
paper.install(window);

window.onload = function() {
  paper.setup(canvas);
  
  var myCircle = new Path.Circle(new Point(100,70),50);
  myCircle.fillColor = 'black';

  var toolPan = new paper.Tool();
  toolPan.onMouseDrag = function (event) {
      var offset = event.downPoint.subtract(event.point);
      // console.log(offset);
      paper.view.center = paper.view.center.add(offset);
  };

  view.draw();
}

html,body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

canvas[resize] {
    width: 100%;
    height: 100%;
}

<canvas id="myCanvas" resize></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.11/paper-full.min.js"></script>