Question

通过阅读Fabric on ContainsPoint（http://fabricjs.com/docs/symbols/fabric.Canvas.html#containsPoint）的文档，它指出：

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

            });   
        }    

    }

});

这里更新的小提琴： http://jsfiddle.net/LNt2g/4/

Answer 2

这里的工作示例：

fabric.util.object.extend(fabric.Object.prototype, {
getAbsoluteCenterPoint: function() {
  var point = this.getCenterPoint();
  if (!this.group)
    return point;
  var groupPoint = this.group.getAbsoluteCenterPoint();
  return {
    x: point.x + groupPoint.x,
    y: point.y + groupPoint.y
  };
},
containsInGroupPoint: function(point) {
  if (!this.group)
    return this.containsPoint(point);

  var center = this.getAbsoluteCenterPoint();
  var thisPos = {
      xStart: center.x - this.width/2,
      xEnd: center.x + this.width/2,
      yStart: center.y - this.height/2,
      yEnd: center.y + this.height/2
  }

  if (point.x >= thisPos.xStart && point.x <= (thisPos.xEnd)) {
      if (point.y >= thisPos.yStart && point.y <= thisPos.yEnd) {
          return true;
      }
  }
  return false;
}});

http://plnkr.co/edit/4rlRPxwIqFIOvjrVYx8z?p=preview

感谢@ mindwire22 answer和https://groups.google.com/d/msg/fabricjs/XfFMgo1Da7U/Hv7LsYa9hMEJ

使用ContainsPoint选择组中的对象

2 个答案: