Tips to imporve performance on pan/zoom

[lham]

Hello,

I have a map with a lot of polygons, points etc that I have rendered with paper.js. It draw very fast but my tools to pan and zoom are very slow and I was wondering if anyone knew and tricks to get such functionality to run smoother.

I constructed a sketch based on some code I found in another performance thread, the sketch is located here:

http://sketch.paperjs.org/#V/0.11.8/S/rVXfb5swEP5XLPYANCmkk7IHMh6mdFGlqVO19K30wcGXxAvYzJhmWZX+7TvbQEjbvc1SVc7367vvzpdnT9ASvMRb7kDnW2/s5ZIZed2IXHMpCGXsBxVMlneSCx2Ez5kgeJ6oIooy3tQkJcEVuSC3VG8jZU2DMCQj8jGazpzx0MXoF7wo5rKQCn0z78PEnsyLFFQFzSFw9ubEk3gzPokdqh5GdxToRgkSvLwEZzgurj6FYaTlUisuNgFKs5Pj0X2GPcpMG4wVBkBgAvbkzsSac5UXEDwbfaZzEBpUQiwdfR6s/4nDPqr5Hxg7Q8dO0rLUXq67ypPXVFiDo8GCdvjHpJ7LRmgySsmVvS0P9/BbR7lEAHifks5kqF2ZOu/lQknTLNRgkZmoqLjBdAWotrB7KQurPmkiKW5lU8O1ohu06qmGJ8wWkkHf5XpdgwFgVRGTe2HZIJftTWWk2ckBM84tbehjaXIkRnkhBQRmVlzIzuVk4uA657fFIORvcLjG/O8DzjRfOzHawYGkKfGp32qwFzh/gYHH0Xsyw3+fyRUOIn6NRn3B3Xn9Ds7nCFvXostEHF/+z2MCkhsoKmQjJtewajaECwRfUlOuyWiK6OfF1NJduqHohtkAN3LQlmbblJCH6WRMppPH9p2185UQf+K3V4Op9Vf4Qne9Am0XtOTFATWYXnEE+R32Q/0Sn0RCPk6RHzvdYrhalprq+myp1LnilU6ZzJvSNC5XQDV8LcBIge/Ufke/E3EOCklZ+u56sEFNmtSQ0CYcdK/PtJLsENGqAsHmW16wwHrheJdDcwW/Gqj1F8Ed/wuFCzToayqkrN5sJxeoqRhWcpb73wFNnHAwYkMv93U8p6BWeerHsaL7DTdLooxLxaRcxS75zzouaY2vKF41WFt7W3KBGr+N1DOxBcrOmbA5+nVyatwMfzFW2KGdnaXaSx4ej38B

Press key 'a' about 20 times to add 20k objects to the canvas. Then mouse-click and drag to pan the resulting image. On my computer that is very slow at least.

[Samuel ASENSI]

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);

        });

    };

    script.src = '//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';

    document.head.appendChild(script);

}

[jsb...@gmail.com]

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]

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]

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]

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.