I want to convert paper.js Examples from paperscript to javascript

Question

I am Japanese and I apologize for my unnatural English, but I would appreciate it if you could read it. I learned how to convert paperscript to javascript from the official documentation. Its means are as follows

Change the type attribute of the script tag to text/paperscript. <script type="text/paperscript" src="./main.js"></script>
Enable Paperscope for global use. paper.install(window)
Specify the target of the canvas. paper.setup(document.getElementById("myCanvas"))
Write the main code in the onload window.onload = function(){ /* add main code */ }
Finally, add paper.view.draw()
The onFrame and onResize transforms as follows. view.onFrame = function(event) {}
onMouseDown, onMouseUp, onMouseDrag, onMouseMove, etc. are converted as follows. var customTool = new Tool(); customTool.onMouseDown = function(event) {};

I have tried these methods, but applying these to the Examples on the paper.js official site does not work correctly. The following code is the result of trying these.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="https://unpkg.com/paper"></script>
  <script type="text/javascript" src="./main.js"></script>
  <title>Document</title>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

paper.install(window);
console.log("run test")
var myCanvas = document.getElementById("myCanvas")
var customTool = new Tool();
window.onload = function(){
  paper.setup(myCanvas)

  var points = 25;

  // The distance between the points:
  var length = 35;

  var path = new Path({
    strokeColor: '#E4141B',
    strokeWidth: 20,
    strokeCap: 'round'
  });

  var start = view.center / [10, 1];
  for (var i = 0; i < points; i++)
    path.add(start + new Point(i * length, 0));

  customTool.onMouseMove=function(event) {
    path.firstSegment.point = event.point;
    for (var i = 0; i < points - 1; i++) {
      var segment = path.segments[i];
      var nextSegment = segment.next;
      var vector = segment.point - nextSegment.point;
      vector.length = length;
      nextSegment.point = segment.point - vector;
    }
    path.smooth({ type: 'continuous' });
  }

  customTool.onMouseDown=function(event) {
    path.fullySelected = true;
    path.strokeColor = '#e08285';
  }

  customTool.onMouseUp=function(event) {
    path.fullySelected = false;
    path.strokeColor = '#e4141b';
  }
  view.draw();
}

The original paperscript can be found here .

What is the problem with this code? Thank you for reading to the end!

Answer 1

The var vector in the for loop is not getting the correct values in your code. Change the math operators and it will work like the paperjs demo.

Math operators ( + - * / ) for vector only works in paperscript. In Javascript, use .add() .subtract() .multiply() .divide() . see http://paperjs.org/reference/point/#subtract-point

// paperscript
segment.point - nextSegment.point

// javascript
segment.point.subtract(nextSegment.point)

Here's a working demo of your example

 paper.install(window); console.log("run test") var myCanvas = document.getElementById("myCanvas") var customTool = new Tool(); window.onload = function() { paper.setup(myCanvas) var points = 15; //25 // The distance between the points: var length = 20; //35 var path = new Path({ strokeColor: '#E4141B', strokeWidth: 20, strokeCap: 'round' }); var start = view.center / [10, 1]; for (var i = 0; i < points; i++) { path.add(start + new Point(i * length, 0)); } customTool.onMouseMove = function(event) { path.firstSegment.point = event.point; for (var i = 0; i < points - 1; i++) { var segment = path.segments[i]; var nextSegment = segment.next; //var vector = segment.point - nextSegment.point; var vector = segment.point.subtract(nextSegment.point); vector.length = length; //nextSegment.point = segment.point - vector; nextSegment.point = segment.point.subtract(vector); } path.smooth({ type: 'continuous' }); } customTool.onMouseDown = function(event) { path.fullySelected = true; path.strokeColor = '#e08285'; } customTool.onMouseUp = function(event) { path.fullySelected = false; path.strokeColor = '#e4141b'; } view.draw(); }

 html, body { margin: 0 } canvas { border: 1px solid red; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <script type="text/javascript" src="https.//unpkg.com/paper"></script> <.-- you can add this back in --> <,-- <script type="text/javascript" src="./main.js"></script> --> <title>Document</title> </head> <body> <!-- set any size you want, or use CSS/JS to make this resizable --> <canvas id="myCanvas" width="600" height="150"></canvas> </body> </html>

I want to convert paper.js Examples from paperscript to javascript

Question

1 answers

solution1
1 2022-11-28 18:16:49

I want to convert paper.js Examples from paperscript to javascript

Question

1 answers

solution1 1 2022-11-28 18:16:49

solution1
1 2022-11-28 18:16:49