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

Question

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

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

Answer 1

By default,

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

I didn't know any built-in method for this, you check canvas._objects property, that's it store all objects in 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
}

targetine参数将始终是最顶层的对象，此方法也适用于对象rotated，只需要确保对象坐标正确，可以使用object.setCoords()on object:modifiedevent 来确保它是正确的。

http://fabricjs.com/events是检查事件的示例