10

I am currently working on a "Photo Collage Maker" project which needs larger canvas area and hundreds of objects(text, images, shapes, clip-arts etc.). The problem is while moving, scaling and rotating those objects, Fabric.js render all the objects which makes it too slow. I want to render only the selected objects on top of the fabric canvas. I have tested renderOnAddition, renderTop also but they are not what I want.

I want the following:

canvas.on('object:moving', function(e) {
    var activeObject = e.target;
    //canvas.renderAll();
    canvas.renderObjects(activeObject);
});

Now instead of canvas.renderAll(), I need method like canvas.renderObjects(activeObject). How can I achieve this functionality in Fabric.js?

Here is my project : Edit Photos For Free

ep4f
  • 420
  • 1
  • 5
  • 14
  • 2
    You must render all, there is no other way. It doesn't metter state of which object had changed, the drawing proccess is drawing pixels. Like frames in a digital video, even if it is a static picture, there are still 25 frames ... – arty May 06 '13 at 15:04
  • If it's not possible, for the sake of fabricjs performance, how can i implement cacheAsBitmap property so that only the moving part is rendered and all other static parts are cached as bitmap. Any ideas and algorithm to implement this on fabricjs ? – ep4f May 08 '13 at 09:31
  • sorry, can't help here. good luck – arty May 08 '13 at 12:12
  • 1
    This comment is possibly related to what you want to do: https://github.com/kangax/fabric.js/issues/318 – Alexander Kludt Jun 18 '13 at 14:06

2 Answers2

1

Your best bet is to have a second canvas, in front of the main one, on which you move/scale/rotate the current item(s).

You mention wanting to render the selected objects on top of the fabric canvas, so this should meet your requirements.

On ending the move/scale/rotate you will have to restore the original canvas elements, apply your changes, and allow it to do a full redraw.

Raith
  • 528
  • 3
  • 8
0

May be there are many renderAll() methods

Chech if that is case you need to use requestRenderAll() method

khajaamin
  • 856
  • 7
  • 18