javascript - Render selected object only while moving, scaling and rotating - Stack Overflow

admin管理员组

文章数量:1405636

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

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

• javascript
• fabricjs
• photos

Share Improve this question Follow edited Apr 4, 2016 at 4:16 user1693593 asked May 6, 2013 at 6:43 ep4fep4f 42011 gold badge55 silver badges1414 bronze badges 4

• 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 Commented May 6, 2013 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 Commented May 8, 2013 at 9:31
• sorry, can't help here. good luck – arty Commented May 8, 2013 at 12:12
• 1 This ment is possibly related to what you want to do: github./kangax/fabric.js/issues/318 – Alexander Kludt Commented Jun 18, 2013 at 14:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

May be there are many renderAll() methods

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

本文标签： javascriptRender selected object only while movingscaling and rotatingStack Overflow