1

containsPointのFabricのドキュメント（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/

4

2 に答える 2

2

解決しました！少し複雑ですが、機能します。グループと子オブジェクトの両方の寸法/位置に基づいて、開始と終了の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/

于 2013-03-04T20:50:45.840 に答える
0

ここでの実例：

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回答とhttps://groups.google.com/d/msg/fabricjs/XfFMgo1Da7U/Hv7LsYa9hMEJに感謝します

于 2016-03-12T10:41:59.163 に答える