Question

当您选择一个对象（在我的示例中为多边形）时，它会自动移动到Front。我正在寻找一种方法来防止z轴上的移动或在选择后向后发送它，也许有人可以提供帮助？

以下是一个简单示例的链接：http://jsfiddle.net/98cuf9b7/1/

当您选择其中一个多边形时，它会移动到前面。我试图在选择后向后发送它，但即使调用“canvas.sendToBack（object）”函数，它仍然保留在前面。

我的示例中的代码是：

var canvas  = new fabric.Canvas('c');

var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

var pol2 = new fabric.Polygon([
  {x: 200, y: 50},
  {x: 200, y: 100},
  {x: 100, y: 100},
  {x: 100, y: 50} ], {
    left: 300,
    top: 200,
    angle: 0,
    fill: 'blue'
  }
);
canvas.add(pol, pol2);

canvas.on('object:selected', function(event) {
        var object = event.target;
        canvas.sendToBack(object);
        //object.sendToBack();
        console.log("OK");
  });

Answer 1

第1步：您可以使用preserveObjectStacking: true

第2步：然后使用sendtoback，sendtofront .... fabricjs选项，如下所示

Working Example with back and front working

＆＃13;

    
var canvas = new fabric.Canvas('c', {
  preserveObjectStacking: true
});

var pol = new fabric.Polygon([{
  x: 200,
  y: 0
}, {
  x: 250,
  y: 50
}, {
  x: 250,
  y: 100
}, {
  x: 150,
  y: 100
}, {
  x: 150,
  y: 50
}], {
  left: 250,
  top: 150,
  angle: 0,
  fill: 'green'
});

var pol2 = new fabric.Polygon([{
  x: 200,
  y: 50
}, {
  x: 200,
  y: 100
}, {
  x: 100,
  y: 100
}, {
  x: 100,
  y: 50
}], {
  left: 300,
  top: 200,
  angle: 0,
  fill: 'blue'
});
canvas.add(pol, pol2);

var objectToSendBack;
canvas.on('object:selected', function(event) {
  objectToSendBack = event.target;
});

var sendSelectedObjectBack = function() {
  canvas.sendToBack(objectToSendBack);
}

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>


<canvas id="c" width="500" height="300" style="margin-top:-150px;"></canvas>

<button height="60" style="margin-left:200px;" onclick="sendSelectedObjectBack()"> Send Back </button>

＆＃13;

Answer 2

好的，所以这是因为你正在使用的Fabric版本。在小提琴中我可以看到你使用$("span.nav-btn").click(function(event){ $('ul.nav').slideToggle(); }); $(window).resize(function(){ if ($(window).width() > 600) { $('ul.nav').removeAttr('style'); } }); 0.9 version所以它似乎是默认行为，每当选择一个对象时，它的z-index被改变，使得它在顶部/前面。尝试使用更高版本。在其他版本中，如果对象位于后面，即使您选择了它，它也不会出现在后面。这是一个稍后.的演示。无论何时选择对象，它都会向后移动。如果你发出向后发送代码的注释，如果在前面，那么它将保留在前面，如果在后面则保留在后面。

＆＃13;

version(1.4.0)

＆＃13;

var canvas  = new fabric.Canvas('c');

var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

var pol2 = new fabric.Polygon([
  {x: 200, y: 50},
  {x: 200, y: 100},
  {x: 100, y: 100},
  {x: 100, y: 50} ], {
    left: 300,
    top: 200,
    angle: 0,
    fill: 'blue'
  }
);
canvas.add(pol, pol2);

canvas.on('object:selected', function(event) {
        var object = event.target;
        canvas.sendToBack(object);
        //object.sendToBack();
        console.log("Selected");
  });

＆＃13;

Fabric JS - 将对象发送回去

2 个答案: