javascript - How to send backward & bringforward a active group in fabricjs - Stack Overflow

admin管理员组

文章数量:1325140

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

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

• javascript
• html
• canvas
• fabricjs

Share Improve this question Follow edited Oct 19, 2015 at 8:00 Dinesh asked Oct 16, 2015 at 9:59 DineshDinesh 85522 gold badges1919 silver badges4141 bronze badges 1

• Can you provide JSFiddle? – xmojmr Commented Oct 18, 2015 at 6:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

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

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./a/41879620/1390678

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

本文标签： javascriptHow to send backward amp bringforward a active group in fabricjsStack Overflow