javascript - 放置在较大对象上时，fabricjs 会选择较小的对象

Question

我正在使用fabric.js，当我将较小的对象(w.r.t高度和宽度或缩放为较小)放置在较大的对象上时，我无法在单击时选择较小的对象

我什至尝试了以下方法，它解决了我的可选择问题，但缺点是我失去了边界 Angular 的缩放，在实现以下方法后我无法缩放对象。

您可以在以下网址上尝试相同的操作http://fabricjs.com/events/检查我所附的屏幕截图，我缩放了红色方 block 并在其上放置了一个较小的绿色方 block 。一旦此放置完成，我将无法选择绿色方 block 。

canvas.on('鼠标:向上', 函数(e) {

canvas.setActiveObject(canvas.item(e.target));

});

Answer 1

这是一个已知问题 https://github.com/kangax/fabric.js/issues/1188由于“优化”。

我通过注释掉 _searchPossibleTargets 中的第一个 if 语句解决了这个问题，

fabric.util.object.extend(fabric.Canvas.prototype, {
    _searchPossibleTargets: function(e) {

        // Cache all targets where their bounding box contains point.
        var target,
            pointer = this.getPointer(e);

        /*
        if (this._activeObject && this._checkTarget(e, this._activeObject, pointer)) {
            this.relatedTarget = this._activeObject;
            return this._activeObject;
        }
        */

        var i = this._objects.length;

        while(i--) {
            if (this._checkTarget(e, this._objects[i], pointer)){
                this.relatedTarget = this._objects[i];
                target = this._objects[i];
                break;
            }
        }

        return target;
    }
});

if 的目的是返回当前事件对象(如果鼠标位于其中)，无论对象顺序如何。如果您有大量对象并阻止您检查它之前的所有对象，那么这是一种优化。