Fabric js一次找到最上面的对象？

Question

我的画布中有几个路径，我试图绘制要放置在画布上特定位置的图像，并且我想根据图像放置的区域裁剪图像，我有位置，但是有更多的对象一个接一个，但是在那一点我只想要最上面的对象。是否有任何内置方法可以帮助我实现这一目标？

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

Answer 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属性，即它将所有对象存储在canvas中。

Answer 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
}

Answer 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是检查事件的示例