Fabricjs 選擇或 hover 基於鼠標位置在 object 邊界矩形上用於內部對象

Question

我想實現基於邊界矩形的選擇，但采用不同的方法。

場景：如果我在 object 內繪制 object，就像第一個文本一樣，然后是矩形，然后是橢圓，然后是三角形。 現在我應該能夠 select 文本或矩形或橢圓或相反的順序。 當我開始懸停三角形的邊界矩形時，選擇或活動 object 應該是三角形，但是當我將鼠標移到橢圓的邊界矩形上時，當前的 object 應該顯示為橢圓等，無論我添加對象的順序如何在 canvas 上。

我嘗試使用perPixelTargetFind並遵循解決方案Fabricjs - 僅通過邊框選擇，這兩種解決方案都無法滿足我的要求。 我正在使用 FabricJS 版本3.6.3

請幫忙。 提前致謝。

Answer 1

耶！！ 首先你需要設置perPixelTargetFind: true和targetFindTolerance:5 。 現在你將面臨選擇的問題。

問題：如果您在空白處按下鼠標並拖動，則會選擇 object。

解決方案：找到了一種方法來做到這一點。 我通過結構的機制進行了調試，以獲取當前鼠標指針位置上的對象。 有一個 function _collectObjects檢查intersectsWithRect （與當前對象的 boundingRect 點相交）， isContainedWithinRect （點是否在 boundingRect 內）， containsPoint （當前鼠標指針點在當前 object 位置）。 因此，您需要覆蓋 _collectObjects function 並刪除containsPoint檢查。 那可行。

覆蓋 function：

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

如果您發現這對您的要求有用，請投票。 謝謝。