CODEWITHSUNDEEP
javascriptfabricjs
melwyn pawar
melwyn pawar

Reputation: 1816

fabricjs smaller object selection when placed over larger objects

I am using fabric.js, when I have a smaller object (w.r.t height and width or scaled to be smaller) placed over a bigger object, I am unable to select the smaller object on click

I have even tried the following,it solves my selectable problem, but the drawback is I lose the scaling at the bounding corners, I am unable to scale the object after implementing the below.

You may try the same onto the following urlhttp://fabricjs.com/events/ check my screenshot attached, I have scaled the red square and placed a smaller green square over it. Once this placement is complete I am unable to select the green square.

canvas.on('mouse:up', function(e) {

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

});

smaller objects over bigger objects do not get selected on click

Upvotes: 0

Views: 1292

Answers (2)

Darbs
Darbs

Reputation: 163

Its a known issue https://github.com/kangax/fabric.js/issues/1188 due to an 'optimization'.

I solved it by commenting out the first if statement in _searchPossibleTargets,

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

The purpose of the if is to return the current active object it the mouse is within it, regardless of object order. Its an optimization if you have a ton of objects and prevents you from checking all objects before it.

Upvotes: 2

py66WJAm
py66WJAm

Reputation: 648

Which version are you using? I experienced the same problem when I updated version 1.4.0 to 1.4.4. I had to go back to 1.4.0. Maybe version 1.4.0 will work for you.

Upvotes: 1

Related Questions