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

Question

指的是我正在尝试实现平底锅。

然而，这仅在我使用 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。

Answer 1

在 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>

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

How to pan in PaperJS without using PaperScript

javascript

paperjs