Fabricjs根据内部对象的对象边界矩形上的鼠标位置进行选择或悬停

Posted 2023-03-25

【中文标题】Fabricjs根据内部对象的对象边界矩形上的鼠标位置进行选择或悬停

【英文标题】：Fabricjs selection or hover based on mouse location on object bounding rectangle for inner objects

【发布时间】：2021-06-20 03:01:55

【问题描述】：

我想实现基于边界矩形的选择，但采用不同的方法。

场景：如果我在对象内部绘制对象，比如第一个文本，然后在其上绘制矩形，然后是椭圆，然后是三角形。现在我应该能够选择文本或矩形或椭圆或相反的顺序。 当我开始悬停三角形的边界矩形时，选择或活动对象应该是三角形，但是当我将鼠标移到椭圆的边界矩形上时，当前对象应该显示为椭圆等等，无论我添加对象的顺序如何在画布上。

我尝试使用perPixelTargetFind 并遵循解决方案Fabricjs - selection only via border，这两种解决方案都无法满足我的要求。 我正在使用 FabricJS 版本3.6.3

提前致谢。

【参考方案1】：

首先您需要设置perPixelTargetFind: true 和targetFindTolerance:5。 现在你将面临选择的问题。

问题：如果您在空白处按下鼠标并拖动，则该对象被选中。

解决方案：找到了一种方法。我通过结构的机制进行了调试，以获取当前鼠标指针位置上的对象。有一个函数_collectObjects 检查intersectsWithRect（与当前对象的boundingRect 点相交）、isContainedWithinRect（这些点是否在boundingRect 内）、containsPoint（当前鼠标指针点在当前对象中地点）。所以你需要重写 _collectObjects 函数并去掉containsPoint 检查。这会起作用的。

重写函数：

_collectObjects: function(e) 
      var group = [],
          currentObject,
          x1 = this._groupSelector.ex,
          y1 = this._groupSelector.ey,
          x2 = x1 + this._groupSelector.left,
          y2 = y1 + this._groupSelector.top,
          selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)),
          selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)),
          allowIntersect = !this.selectionFullyContained,
          isClick = x1 === x2 && y1 === y2;
      // we iterate reverse order to collect top first in case of click.
      for (var i = this._objects.length; i--; ) 
        currentObject = this._objects[i];

        if (!currentObject || !currentObject.selectable || !currentObject.visible) 
          continue;
        

        if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2)) ||
            currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2))
        ) 
          group.push(currentObject);
          // only add one object if it's a click
          if (isClick) 
            break;
          
        
      
      if (group.length > 1) 
        group = group.filter(function(object) 
          return !object.onSelect( e: e );
        );
      
      return group;