How to select the objects by only clicking the actual contents by Fabric.js

Question

I want to select the objects by clicking the actual contents. So I set the perPixelTargetFind=true and following the paragraph in the introduction:

"By default, all Fabric objects on canvas can be dragged by the bounding box. However, if you want different behavior — clicking/dragging objects only by its actual contents, you can use " perPixelTargetFind " property on an object. Just set it to true to get the desired behavior."

By doing this, I can drag the objects by the actual contents, but the objects can still be selected by clicking the bounding area.

Is it possible to clicking objects only by its actual contents?

Answer 1

Is this what you wanted?

for (var i = 0, len = 15; i < len; i++) {
    fabric.Image.fromURL('../assets/ladybug.png', function(img) {
        img.set({
            left: fabric.util.getRandomInt(0, 600),
            top: fabric.util.getRandomInt(0, 500),
            angle: fabric.util.getRandomInt(0, 90)
        });

        img.perPixelTargetFind = true;
        img.targetFindTolerance = 4;
        img.hasControls = img.hasBorders = false;

        img.scale(fabric.util.getRandomInt(50, 100) / 100);

        canvas.add(img);
    });
}

Basically, you assign perPixelTargetFind is true, and ( hasControls & hasBorders ) is false.