Tips to imporve performance on pan/zoom

125 views
Skip to first unread message

lham

unread,
Feb 2, 2019, 10:24:12 AM2/2/19
to Paper.js

Samuel ASENSI

unread,
Feb 11, 2019, 10:21:18 AM2/11/19
to Paper.js
Hi,

a trick that I used in one of my projects is to rasterize every item that doesn't need to be modified anymore and get them out of the rendering process.
In the case of your example, a possible optimization could be to rasterize the points after they have been created, then, remove them from memory as we no longer need them.
This might not be the exact solution to your map problem but I think that this concept can be translated to your specific need.
Here is a sketch demonstrating the solution.
You can see that no matter how much points you draw, the FPS rate stays constant.

// declare a variable that will be used to store the raster
let raster;

// create a group that will contain the points
// it will be used to easily remove all created points
const points = new Group();

// create tool
const panHandler = new Tool();
panHandler.onMouseDrag = function(event) {
    var offset = event.downPoint - event.point;
    var newCenter = view.center.clone() + offset;
    view.center = newCenter;
};
panHandler.onKeyDown = function(event) {
    if (event.key == 'a') {
        for (var i = 0; i < 1000; i++) {
            addRandomPoint();
        }
        rasterize();
    }
};

// create counter text
const counter = new PointText({
    point: [50, 50],
    content: '0',
    fillColor: 'black',
    fontFamily: 'Courier New',
    fontWeight: 'bold',
    fontSize: 50,
    strokeColor: 'white',
    strokeWidth: 1
});

addStats();


//
// METHODS
//

function addRandomPoint() {
    new Path.Circle({
        center: Point.random() * view.size,
        radius: (1 * Math.random()) + 2.5,
        fillColor: Color.random(),
        parent: points
    });

    counter.content = +counter.content + 1;
}

function rasterize() {
    // hide counter to avoid rasterizing it
    counter.visible = false;

    // rasterize the layer
    const newRaster = project.activeLayer.rasterize();

    // remove points (which are now useless)
    points.removeChildren();

    // remove previous raster
    if (raster) {
        raster.remove();
    }

    // store current raster
    raster = newRaster;

    // show counter
    counter.visible = true;
}

function addStats() {
    var script = document.createElement('script');
    script.onload = function() {
        var stats = new Stats();
        document.body.appendChild(stats.dom);
        requestAnimationFrame(function loop() {
            stats.update();
            requestAnimationFrame(loop);
        });

    };
    document.head.appendChild(script);
}


jsb...@gmail.com

unread,
Mar 20, 2019, 9:24:02 AM3/20/19
to Paper.js
Im running into the same problem, is there a way I can come back after rasterize an path? In my case the user needs to be able to edit the shapes at any time, so If I rasterize it until they need it again, it might fix my performance issue.

Samuel ASENSI

unread,
Mar 25, 2019, 9:48:52 AM3/25/19
to Paper.js
Instead of totally removing items, you can instead only hide them to make sure they are not drawn and later when you need to update them, you can remove the raster, show the items, update them and rasterize again.
That will be less efficient since items are kept in memory so this will be useful in a limited number of cases.

MUKUND THAKARE

unread,
Apr 20, 2021, 2:02:09 AMApr 20
to Paper.js
Hello,
I have been facing issue with the Pan of the project.
Issue - Pan operation is not smooth enough when compared to mouse movement.

Right now in active layer of project, I am having like 9000 paper.Path, And when I Pan It slow.

So Two of the solution that I tried is, 
1) Pan project view instead of each object/path.
2) Hide some of the elements.

But I am not getting results good enough.

Please let me know your thoughts/solutions/comments on this issue.


Thanks !!

Juro Dobrik

unread,
Apr 20, 2021, 2:43:12 AMApr 20
to pap...@googlegroups.com
I suggest having "relative point" somewhere defined in canvas's properties, which then can be moved programmatically.

If you're not doing some hyperexpensive manipulation, store your drawings in some object or array, the pointers to them, and then, simply iterate array to pan it all.
I don't know if you mean, that it's slow for you or computer.

If it's slow for computer, then simply don't move by points, but redraw at different coordinates.

I guess you're iterating every point in path, and that's why it's slow.

Discard it and draw it on new canvas.

It should take same amount of time, but maybe don't render meanwhile.

ut 20. 4. 2021 o 8:02 MUKUND THAKARE <mukundth...@gmail.com> napísal(a):
--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/db53e469-1652-49fc-82c0-1c20b5e85d53n%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages