Lui*_*rme 3 javascript canvas fabricjs
当我选择一组对象时,它们会自动呈现在所有对象之上.这是一种烦人的行为,很难选择位于所选元素之上的其他元素.
还有就是那发生的例子在这里.
function newRect(index) {
return new fabric.Rect({
width: 100,
height: 100,
top: index * 30,
left: index * 30,
fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
});
}
var canvas = new fabric.Canvas('canvas');
var rect0 = newRect(0);
canvas.add(rect0);
var rect1 = newRect(1);
canvas.add(rect1);
var rect2 = newRect(2);
canvas.add(rect2);
var group = new fabric.Group([rect0, rect1]);
canvas.setActiveGroup(group).renderAll();
setTimeout(function() {
canvas.discardActiveGroup().renderAll();
}, 5000);
Run Code Online (Sandbox Code Playgroud)
当选择位于另一个元素后面的两个元素时,它们将呈现在第三个元素之上.但是当它们被取消选择时(等待5秒直到该组被丢弃),它们将被正确地呈现在顶部的元素后面.
反正有禁用此行为?我希望所选元素在选中时保持z顺序,而不是在所有内容之上.
我想我找到了解决方案.
我需要preserveObjectStacking: true在初始化画布时添加add 选项.
var canvas = new fabric.Canvas('canvas', {
preserveObjectStacking: true,
});
Run Code Online (Sandbox Code Playgroud)
https://jsfiddle.net/fbgu7697/3/
它按照我的预期工作,但似乎有一个奇怪的错误.我将在github上打开它.
UPDATE
该问题已在1.6.1版本中修复.
https://jsfiddle.net/1vawp9gu/