CODEWITHSUNDEEP
javascriptpaperjs
volki
volki

Reputation: 171

How to use paperscript from external source?

I'm trying to learn paper.js from tutorials, but i'cant make it work from external file .What is the easiest way to implement external paperscript files?

Upvotes: 5

Views: 3161

Answers (3)

Mayhem50
Mayhem50

Reputation: 305

I had same problem as yours. I use the 0.12.15 version and I finaly get what was the problem.

For me, it was the synthax of the script. I use const, let and arrow function but the paperscript parser is not able to understand these kind of writing.

Failing code :

const rectangles = [
  new paper.Rectangle(new paper.Point(10, 10), new paper.Size(100, 50)),
  new paper.Rectangle(new paper.Point(10, 150), new paper.Size(100, 50)),
  new paper.Rectangle(new paper.Point(10, 300), new paper.Size(100, 50)),
  new paper.Rectangle(new paper.Point(10, 450), new paper.Size(100, 50))
]

rectangles.forEach((rectangle) => {
  const path = new paper.Path.Rectangle(rectangle)
  path.fillColor = "#e9e9ff"
})

Working code :

var rectangles = [
  new paper.Rectangle(new paper.Point(10, 10), new paper.Size(100, 50)),
  new paper.Rectangle(new paper.Point(10, 150), new paper.Size(100, 50)),
  new paper.Rectangle(new paper.Point(10, 300), new paper.Size(100, 50)),
  new paper.Rectangle(new paper.Point(10, 450), new paper.Size(100, 50))
]

rectangles.forEach(function(rectangle){
  var path = new paper.Path.Rectangle(rectangle)
  path.fillColor = "#e9e9ff"
  path.on
})

Upvotes: 1

Alex
Alex

Reputation: 163

--What about the new versions now? I still have the issue and Paperjs is at version 0.11.5?--

Actually I found the solution via another student in Udemy -Git link here. Go to the paper-full.js (it works only with the downloaded version, not CDN) and transform the line

    xhr.open((options.method || 'get').toUpperCase(), options.url,
    Base.pick(options.async, true));

into only 

xhr.open((options.method || 'get').toUpperCase(), options.url);

I understood that's not to be used in normal website as it's against a security protocols, so it's just for practicing. The async method is optional according to Paperjs. By the way, for me it works on Firefox, but not in Chrome.

Upvotes: 0

FR6
FR6

Reputation: 3167

Like stated in the Getting started tutorial, if you want to use Paperjs with an external file:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="js/paper.js"></script>
    <script type="text/paperscript" src="js/myScript.js" canvas="myCanvas"></script>
</head>
<body>
    <canvas id="myCanvas" resize></canvas>
</body>
</html>

Be sure to specify:

  • the script type "text/paperscript"
  • your canvas ID with the attribute "canvas"

Upvotes: 5

Related Questions