javascript - Paperjs causing class syntax error when not using Paperjs code

Question

Welcome To Ask or Share your Answers For Others

javascript - Paperjs causing class syntax error when not using Paperjs code

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Paperjs causing class syntax error when not using Paperjs code

Using Paperjs:

<script type="text/javascript" src="paper.js"></script>
<script type="text/paperscript" canvas="myCanvas" src="myapp.js"></script>

Trying to create a class in myapp.js:

class Petal {
  constructor(index, x, y, diameter, round) {
    this.index = index;
    this.x = x;
    this.y = y;
    this.diameter = diameter;    
    this.round = round;

This creates a "syntax error unexpected token" in paper.js(not my code, thats the paperjs framework) at [paper.js:15421:12].

It refers to this (line 4 being 14521):

  function raise(pos, message) {
    var loc = getLineInfo(input, pos);
    message += " (" + loc.line + ":" + loc.column + ")";
    var err = new SyntaxError(message);
    err.pos = pos; err.loc = loc; err.raisedAt = tokPos;
    throw err;
  }

I'm new to coding like this and I'm just stumped. The class I'm making doesn't even use any code from paperjs so I don't know why it's creating an error in the paper.js file. Also new to stack overflow so please tell me what I am doing wrong.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:42:12+0000

By specifying type="text/paperscript" on your <script> tag, you are loading your code as PaperScript rather than JavaScript.
This means that Paper.js will parse it first before passing it to the browser JavaScript engine.
In order to parse your code, Paper.js uses acorn, a parser library. And the version of acorn bundled with Paper.js doesn't support ES6 syntax.
What you can do to circumvent that, is loading a newer version of acorn (that supports ES6) before loading Paper.js.
This is actually what is done on the Paper.js playground: http://sketch.paperjs.org/

Here is a fiddle demonstrating the solution.
Note that I used https://unpkg.com to quickly load the latest versions of npm packages but you load them from wherever you want.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug</title>
    <!-- Load latest acron version first -->
    <script type="text/javascript" src="https://unpkg.com/acorn"></script>
    <!-- Then load Paper.js -->
    <script type="text/javascript" src="https://unpkg.com/paper"></script>
    <style>
      html,
      body {
          margin: 0;
          overflow: hidden;
          height: 100%;
      }

      canvas {
          width: 100%;
          height: 100%;
      }
    </style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
// Here you can now use ES6 syntax.
class MyClass {
    constructor() {
        new Path.Circle({
            center: view.center,
            radius: 50,
            fillColor: 'orange'
        })
    }
}

const myInstance = new MyClass();
</script>
</body>
</html>

Categories

javascript - Paperjs causing class syntax error when not using Paperjs code

javascript - Paperjs causing class syntax error when not using Paperjs code

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags