How to send backward & bringforward a active group in fabricjs

Question

I am trying to send backward & bring forward a active object/active group on click of button in fabric js , i am able send backward a active object but getting problem in group.
Here is my code

    $('#send-backward').click(function() { 
            var activeObject=canvas.getActiveObject(),
                activeGroup=canvas.getActiveGroup();
            if (activeObject) {
                canvas.sendBackwards(activeObject);
                canvas.renderAll();
                }
            else if (activeGroup) {
                  canvas.getActiveGroup().forEachObject(function(o){canvas.sendBackwards(o); });
//activeGroup.sendBackwards();
                  canvas.renderAll();
                } 
             });

    $('#bring-forward').click(function() { 
        var activeObject=canvas.getActiveObject(),
            activeGroup=canvas.getActiveGroup();
        if (activeObject) {
            canvas.bringForward(activeObject);
            canvas.renderAll();
            }
        else if (activeGroup) {
              canvas.getActiveGroup().forEachObject(function(o){canvas.bringForward(o); });
//activeGroup.bringForward();
              canvas.renderAll();
            }

         });

Jsfiddle with this code bring forward is ok but problem in send backward
and another code try is
jsfiddlethis code is working strange it make a copy of group

Thanks in advance for help

score 2 · Answer 1 · answered Oct 16 '15 at 19:13

2

You can directly use activeGroup.sendBackwards() respective activeGroup.bringForward()

answered Oct 16 '15 at 19:13

BKR

433
3
12

i also try this but there is problem you can check updated question & Jsfiddles – Dinesh Oct 19 '15 at 08:01

score 1 · Answer 2 · answered Nov 13 '18 at 02:25

document.getElementById('tofront').addEventListener("click",enviarFrente);
function enviarFrente()
{
    var myObject = canvas.getActiveObject();
    canvas.bringToFront(myObject);
    canvas.discardActiveObject();
canvas.renderAll(); 
}


document.getElementById('toback').addEventListener("click",enviarFondo);
function enviarFondo()
{
  var myObject = canvas.getActiveObject();
  canvas.sendToBack(myObject);
  canvas.discardActiveObject();
canvas.renderAll(); 
}

document.getElementById('toAdelante').addEventListener("click",moverAdelante);
function moverAdelante()
{
  var myObject = canvas.getActiveObject();
  canvas.bringForward(myObject);
  canvas.discardActiveObject();
canvas.renderAll(); 
}

document.getElementById('toAtras').addEventListener("click",enviarAtras);
function enviarAtras()
{
  var myObject = canvas.getActiveObject();
  canvas.sendBackwards(myObject);
  canvas.discardActiveObject();
canvas.renderAll(); 
}

score 0 · Answer 3 · edited May 23 '17 at 12:09

0

In version 1.7.3 activeGroup.sendBackwards() && activeGroup.bringForward()

Were not working properly so i post fiddle over here where Both sendToBack && bringToFront Works nicly

https://stackoverflow.com/a/41879620/1390678

edited May 23 '17 at 12:09

Community

1
1

answered Jan 26 '17 at 18:12

vijay

10,276
11
64
79

score 0 · Answer 4 · answered Oct 15 '21 at 07:58

Try this code, Works fine for me.

var selectedObj = "" ;
          canvas.on({
            'selection:updated': bringToFront,
            'selection:created':  bringToFront
          })
        function bringToFront(options){
            
             selectedObj = options.target; 
           
          } 

          $('#front').click(function(){
       
               console.log(selectedObj);
           selectedObj.bringForward();
           
          });
          $('#backword').click(function(){
  
            console.log(selectedObj);
            selectedObj.sendBackwards();
            
           });

How to send backward & bringforward a active group in fabricjs

4 Answers4