How to pan in PaperJS without using PaperScript

Question

Referring to How to pan using paperjs I was trying to implement the pan.

This however only works for me when I use PaperScript and stops to work when I do it in regular 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>

Logging out offset to the console tells me it can’t substract the points. In PaperScript the exact same works well, however I have to make it work in regular JavaScript for my Project.

score 1 · Accepted Answer · answered Oct 13 '20 at 16:12

In PaperScript, you can use mathematical operators on Point instances but you can't do this in JavaScript so you have to use the corresponding methods instead.
point1 + point2 => point1.add(point2), etc...

Here is the corrected code:

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>

How to pan in PaperJS without using PaperScript

1 Answers1