CODEWITHSUNDEEP
performancepaperjs
Abby
Abby

Reputation: 3199

Paperjs: only draw changed items

I'm working on a project where there are often thousands of items being drawn with paperjs. This is very slow as paperjs is redrawing every item even when they've not changed. Is there a way to avoid this?

I've found this helpful paperjs fork which does solve the problem, however it doesn't seem to be maintained anymore and there are some issues with it not clearing items correctly.

Just wondering if there is a 'proper' built in paperjs solution I've not found, or will I just need to make my own fork.

To create the items I'm using: 

new Path.Rectangle(start, values.blockSize);

Then just changing it's colour later on.

Here's a fiddle so you can see how slow it gets at high grid sizes

Thanks

Upvotes: 1

Views: 409

Answers (1)

arthur.sw
arthur.sw

Reputation: 11619

I think my fork can help you. I should have provided the documentation. Here is the thread where I explain what I changed and how it works (It should be possible to merge those changes with the latest paper.js).

And two examples: persistance (progressive fade out) and benchmark (click and press space to see the difference). The code is here in the drawings directory but I am not sure you can see it.

Upvotes: 0

Related Questions