Fabric JS - 将对象发送到后面

2022-01-19 00:00:00 frontend javascript fabricjs

当您选择一个对象(在我的示例中为多边形)时，它会自动移动到前面.我正在寻找一种方法来防止 z 轴上的移动或在选择后将其向后发送，也许有人可以帮忙?

When you select an object (in my example a polygon), it gets automatically moved to the Front. I'm searching for a way to prevent the movement on the z-axis or send it backwards after the selection, maybe someone can help?

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

Here is a link to a simple example: http://jsfiddle.net/98cuf9b7/1/

当您选择其中一个多边形时，它会移到前面.我尝试在选择后将其向后发送，但即使调用了canvas.sendToBack(object)"函数，它仍然保留在前面.

When you select one of the Polygons, it gets moved to the Front. I tried to send it backwards after the selection, but even if the "canvas.sendToBack(object)" function is called, it's still remains in the Front.

我的示例中的代码是:

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

推荐答案

好的，这是因为您使用的是 Fabric 版本.在小提琴中，就像我看到的那样，你已经使用了版本 0.9 .所以它似乎是无论何时选择对象时，它z-index会改变，使其更改它顶部/前面.尝试使用更高版本.在其他版本中，如果一个对象在后面，则即使您选择它，它仍然在后面，则不会出现此问题.这是一个带有更高版本 version(1.4.0) 的演示.在这里，每当您选择对象时，它将向后移动.如果您注释掉向后发送的代码，它将保持在前面，如果在前面，则在后面.

Ok so this is happening because of the Fabric version you are using. In fiddle as i can see you have use version0.9. So it seems to be the default behaviour that whenever an object is selected its z-index is changed such that its on the top/front. Try using a later version. In other versions this issue is not there if an object is at the back it remains at the back even if you select it. Here is a the demo with a later version(1.4.0). Here whenever you select the object it will be moved backwards. And if you comment out the sending backwards code it will remain in front if in front and at the back if at the back.

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

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

相关文章