javascript - 使用 ContainsPoint 选择组中的对象

Question

通过阅读 ContainsPoint ( http://fabricjs.com/docs/symbols/fabric.Canvas.html#containsPoint ) 上的 Fabric 文档，它指出:

Applies one implementation of 'point inside polygon' algorithm
Parameters:
e
{ Event } event object
target
{ fabric.Object } object to test against
Returns:
{Boolean} true if point contains within area of given object

因此，基于此，我尝试遍历一个组中的所有对象，如果 containsPoint 返回 true，则选择该对象。

但它总是返回false；

canvas.on('object:selected',function(o,i) {

    console.log(o)

    if ( o.target.isType('group') ) {
        o.target.forEachObject(function(child) {
            child.setCoords();
            //always false
            console.log(canvas.containsPoint(o.e, child) );
        });
    }
})

这是 jsFiddle - 有什么想法吗？ http://jsfiddle.net/LNt2g/1/

Answer 1

解决了!有点复杂，但它有效。我必须根据组和子对象的尺寸/位置专门计算开始和结束的 x/y。

canvas.on('mouse:down', function(options) {

    if (options.target) {

        var thisTarget = options.target; 
        var mousePos = canvas.getPointer(options.e);

        if (thisTarget.isType('group')) {

            var groupPos = {
                x: thisTarget.left,
                y: thisTarget.top
            }

            thisTarget.forEachObject(function(object,i) {

                var objectPos = {
                    xStart: (groupPos.x - (object.left*-1) )  - (object.width / 2),
                    xEnd: (groupPos.x - (object.left*-1)) + (object.width / 2),
                    yStart: (groupPos.y - (object.top*-1)) - (object.height / 2),
                    yEnd: (groupPos.y - (object.top*-1)) + (object.height / 2)
                }

                if (mousePos.x >= objectPos.xStart && mousePos.x <= (objectPos.xEnd)) {

                    if (mousePos.y >= objectPos.yStart && mousePos.y <= objectPos.yEnd) {
                        console.log(objectPos);
                        console.log('Hit!',object);
                    }
                }

            });   
        }    

    }

});  

这里是更新的 fiddle : http://jsfiddle.net/LNt2g/4/