当您选择一个对象(在我的示例中为多边形)时,它会自动移动到Front。我正在寻找一种方法来防止z轴上的移动或在选择后向后发送它,也许有人可以提供帮助?
以下是一个简单示例的链接:http://jsfiddle.net/98cuf9b7/1/
选择其中一个多边形时,它将移动到前面。我试图在选择后向后发送它,但即使调用“canvas.sendToBack(object)”函数,它仍然保留在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版本。在小提琴中,我可以看到你使用version
0.9.
所以它似乎是默认行为,每当选择一个对象时,它的z-index被改变,使得它在顶部/前面。尝试使用更高版本。在其他版本中,如果对象位于后面,即使您选择了它,它也不会出现在后面。这是一个后来的version(1.4.0)
的演示。无论何时选择对象,它都会向后移动。如果你注释掉向后发送的代码,如果在前面,它将保持在前面,如果在后面则保留在后面。
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>
第1步:您可以使用preserveObjectStacking: true
第2步:然后使用sendtoback,sendtofront .... fabricjs选项如下
Working Example with back and front working
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);
}
<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>