Fabric js在某一点上找到最顶层的对象？答案

【问题标题】：Fabric js Finding the top most object at a point?Fabric js在某一点上找到最顶层的对象？
【发布时间】：2013-10-06 05:00:33
【问题描述】：

我的画布中有几条路径，我正在尝试绘制一个放在画布上某个位置的图像，并且我想根据图像被放置的区域剪辑图像，我有位置，但是还有更多的对象一个在另一个之下，但我只想要那个时候最上面的对象..有没有内置方法可以帮助我实现这一目标？

任何帮助将不胜感激，在此先感谢。

【问题讨论】：

标签： jquery html jquery-ui fabricjs

【解决方案1】：

默认情况下，

var objects = canvas.getObjects();
var top = objects[objects.length - 1];

for (var i = objects.length - 1; i >= 0; --i) {
    if (objects[i].left === 100 && objects[i].top === 100) {
        top = objects[i];
        break;
    }
}

我不知道任何内置方法，你检查canvas._objects属性，就是它将所有对象存储在画布中。

【讨论】：

没关系，但我想在某个点获取最顶层的对象，比如在 (100,100) 处？
比较一下它的left和toppropery，可以吗？
z-index 最高的，可以有很多对象，left 和 top 相同但 z-index 不同！

【解决方案2】：

var objs = canvas.getObjects();
var topmost = new Object(); 

   jQuery.each(objs,function(index,val){

        if( val.containsPoint(position) && !(editor.isTargetTransparent(val, canvasX, canvasY)) ){
            //alert("here -->"+val.type);
             // alert(val.get("clipFor"));
            topmost = val;
        }


   });
if(topmost != undefined){
//code here
}

【讨论】：

【解决方案3】：

关于farbic js画布鼠标事件

function mouseEvent(e) {
    console.log(e.target);
}

canvas.on({
    "mouse:up": mouseEvent,
    "mouse:down": mouseEvent
}

e 参数中的target 始终是最顶层的对象，此方法也适用于rotated 对象，只需确保对象坐标正确，可以在object:modified 上使用object.setCoords()事件以确保它是正确的。

http://fabricjs.com/events 是要检查事件的样本

【讨论】：