Paperjs causing class syntax error when not using Paperjs code

前端未结

关注

 1  921

Using Paperjs:


                      
              相关标签:


      
      
        
          1条回答        

        
                         				            
            
           
            
                              
                
              
              
                
                  独厮守ぢ        
                
              
                            
                2020-12-22 04:16
              
            
            
                                                                       
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>

                                                                        
                                                        
            
            
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
                                                            
            
                      
                    


               
            
    发布评论:
    
         
                        
    
    提交评论 
  
  

                    
                    
                    
                        
                        
                         加载中...
                        
                    
                
          
          	          
                             
        
        
          
            
            
              
              
            
    


                                 
              
            
                          
    

        
         
                验证码
                
                  
                
                
                   看不清?
                
              
                                  
                    
   
                 
             
              提交回复