在Fabric.js中对画布对象分层
在Fabric.js中对画布对象分层
提问于 2013-02-23 04:16:55
有没有办法通过官方应用程序接口在Fabric.js画布上分层对象？现在，我找到的唯一方法是手动迭代canvas._objects并重新排序，以便以特定的顺序绘制它们。有没有更好的方法来做到这一点，而不(潜在地)破坏对象？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-02-23 13:05:28
编辑我已经更正了下面的信息(我的错，我最初考虑的是KineticJs api)。
FabricJS提供了以下API方法来更改对象的z索引：
canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)在幕后，FabricJs通过从getObjects()数组中删除对象并将其拼接回所需位置来更改z索引。它有一个很好的优化，可以检查相交的对象。
bringForward: function (object) {
var objects = this.getObjects(),
idx = objects.indexOf(object),
nextIntersectingIdx = idx;
// if object is not on top of stack (last item in an array)
if (idx !== objects.length-1) {
// traverse up the stack looking for the nearest intersecting object
for (var i = idx + 1, l = this._objects.length; i < l; ++i) {
var isIntersecting = object.intersectsWithObject(objects[i]) ||
object.isContainedWithinObject(this._objects[i]) ||
this._objects[i].isContainedWithinObject(object);
if (isIntersecting) {
nextIntersectingIdx = i;
break;
}
}
removeFromArray(objects, object);
objects.splice(nextIntersectingIdx, 0, object);
}
this.renderAll();
},Stack Overflow用户
发布于 2017-01-27 02:01:12
第1步:可以使用preserveObjectStacking: true
步骤2:然后使用sendtoback，sendtofront....fabricjs选项，如下所示
Stack Overflow用户
发布于 2017-07-06 15:43:58
如果您希望为所有对象设置特定的顺序，而不是向前/向后移动一个对象，则带到/发送到前面/后面的迭代调用会很慢。
您可以使用bringToFront的代码作为灵感来加速这个用例：https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468
然后这样做：
fabric.Canvas.prototype.orderObjects = function(compare) {
this._objects.sort(compare);
this.renderAll();
}其中比较定义排序，如下所示：
function compare(x,y) {
return x.getWidth() * x.getHeight() < y.getWidth() * y.getHeight();
}
some_canvas.orderObjects(compare)如果您希望将较小的对象放在前面。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15032497
复制相关文章
相似问题