paper.js | Swiss Army Knife of Vector Graphics Scripting –
kandi X-RAY | paper.js Summary
kandi X-RAY | paper.js Summary
If you want to work with Paper.js, simply download the latest "stable" version from
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of paper.js
paper.js Key Features
paper.js Examples and Code Snippets
Community Discussions
Trending Discussions on paper.js
QUESTION
I'm trying to read a file from STDIN, process it with paper.js and return the results.
To get there I first tried to do it by reading in a file from the fs like this:
...ANSWER
Answered 2021-Jun-11 at 15:15I'm not able to reproduce it with another svg file like https://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg.
Could you please link your svg file ?
I suggest you to try with the following code, as readFile on stdin could not work properly (https://github.com/nodejs/node-v0.x-archive/issues/7412)
QUESTION
I am trying to create a set of shapes in paper.js. Each shape should be draggable and the index of that shape be given during dragging.
I have tried the following code, but I just get the message "Uncaught TypeError: Cannot read property 'position' of undefined".
Any help gratefully received.
...ANSWER
Answered 2021-Apr-14 at 20:51Your error comes down to the way variable scoping works in Javascript: variables are scoped to the containing function or script. By the time you come along and drag the circle, i === 5
from the for loop, and thus path[i]
is undefined (out of bounds) in the drag function. Hence, your error.
If you would like to learn more, this answer provides an in-depth look into this "closure inside loop" problem.
SolutionsThis answer provides some common solutions to this problem.
ES6 LetThe ES6 let
statement is the modern solution to this problem, avoiding many of the scope "quirks" of the var
statement. Variables scope to the containing block, so each pass of the loop gets its own instance of i
.
To use ES6 features within PaperScript, you first need to load a newer version of the Acorn parser (thanks sasensi and Geddes). Then simply declare let i
in the loop:
QUESTION
The following code gives "script error". Any help greatly appreciated.
HTML
...ANSWER
Answered 2021-Mar-31 at 16:54After a quick look at your code, I would say that:
- you are passing a promise to the
importSVG
function - the
importSVG
function expects to receive a SVG string and your promise will resolve with a PNG image data url
QUESTION
just wondering what the difference between a clone
and a symbol
in paper.js. Thanks.
ANSWER
Answered 2021-Mar-03 at 07:48A clone is just a copy of an item that makes it an independent instance which can have its own properties (fill, stroke, ...). The most common use case for it is having a quick way to create an item similar to another, avoiding creating it from scratch.
When the source of the cloned item is modified, the cloned item doesn't change.
A symbol item is an identical copy of an item (its related symbol definition) that can only have its own matrix tranformations (translation, rotation, ...) but not its own style (fill, stroke, ...). The most common use case for it is performance optimization when the same item has to be repeated multiple time (e.g. drawing a sky full of stars).
When the symbol definition of the symbol item is modified, the symbol item is updated.
QUESTION
I'm running into a bit of an odd issue with Paper.js - I'm using the library to scale the "petals" of a randomly generated flower while audio plays.
The issue crops up if the flower is "growing" and the user navigates to a different tab in the browser. Even though it appears that the onFrame event is not firing when the window is out of view, whichever petal is currently scaling at the time will continue to scale indefinitely.
I even tried using a special js library to determine if the window is in view and still wasn't able to get the petals to stop scaling.
You can view a demo here, as I was not even able to replicate this in a Paper sketch: https://demos2.paperbeatsscissors.com/
Also including my onFrame code here in case the problem is obvious to someone:
...ANSWER
Answered 2021-Feb-25 at 14:55I think that your problem is coming from the fact that you base your scaling calculation on event.delta
which represents the time elapsed since the last event fired.
The thing is that, if I'm not mistaken, under the hood, Paper.js onFrame
event relies on requestAnimationFrame
which does not fire when the tab if inactive.
So when you switch tab, wait for a while and get back to your tab event.delta
value is big and your scaling value too, hence the size of your petals. This basic sketch showcase this behavior.
So in my opinion, you should simply check event.delta
value and limit it if it's too high.
QUESTION
I´m trying to draw an arc using mouse events with paper.js
The user must be able to draw an arc from 0 degree to 360 degree. The issue that I´m facing is that I can draw 270 degree arc but more than 270, the arc flips to another quadrant.
Start point must be located anywhere
A sketch can be found here:
and this is the implemented code:
...ANSWER
Answered 2021-Feb-17 at 08:09There are certainly tons of ways to do this but here's how I would do it: sketch.
This should help you finding the proper solution to your own use case.
QUESTION
Im using paper.js and attempting to created function to create zizag paths. I have divided the path up in to segments, using getPointAt and now trying ad the zigzag by adding the normals sketch and code. Thanks in advance code:
...ANSWER
Answered 2021-Jan-20 at 10:00You should use another path than the original one to build your zigzag because you are mutating it and this might alter the points/normals calculations.
Here is a corrected sketch which you should easily be able to adapt to your use case.
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.
...ANSWER
Answered 2020-Oct-13 at 16:12In 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:
QUESTION
I'm trying to make a union of relatively complex SVG like this one. I want to unite the paths that make the "HELLO" letters with the big "A" letter behind. On Inkscape, I can do this by selecting all the paths and going to Path->Union, so the paths are converted from this:
To this:
Notice how the paths making the "HELLO" letters in the center are now united with the big "A" behind them. I want to achieve the same by using paper.js
, as it's the best solution I could find to make boolean operations with SVG files without poligonizing them and because I can't do this with Inkscape CLI without GUI.
I create this sketch in paper.js
to load the SVG file and make a union between all the CompoundPaths
and Paths
hoping that would achieve the same effect, but, apparently it's not that simple, the resulting path from the sketch is:
ANSWER
Answered 2020-Oct-01 at 16:03I finally managed to solve it! I had to make sure to not unite
paths that were used as clipMask
AND making sure all paths were closed by using the closePath()
method. The final code looks like this:
QUESTION
I am using paper.js to make a level editor. I am currently bugging on how to resize a rectangle properly
Currently, I am doing something like :
...ANSWER
Answered 2020-Aug-03 at 12:23Make projection of mouse move vector onto rectangle side vectors (they depends on rotation angle) and apply corresponding changes to rectangle side lengths.
One rectangle side has unit direction vector (cos(fi), sin(fi))
, another (neighbor) side - (-sin(fi), cos(fi))
and for mouse shift (mx, my)
applied to vertex between these sides:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install paper.js
Create a final zipped distribution file inside the dist folder:.
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page