如何使画布中的对象不可选择？

Question

I want to make all object in canvas unselectable. I've found selectable method but i didn't find the way to implement it to all objects.

Answer 1

I was looking for an unmovable and uneditable Fabric Text and I finally found a solution combining several SO, hope I can save someone some time.

Using "selectable": false wasn't enough in my case: the text was still editable and the cursor was still the "movable cursor" (even if the object wasn't selectable).

I had to add "evented": false . Here is an example:

this.canvas.add(new fabric.Text("Hello world !", {
            "selectable": false,
            "evented": false
}));

You can play with different control options here: http://fabricjs.com/controls-customization

Answer 2

You can make all the elements un-selectable using below code

canvas.deactivateAll();
canvas.renderAll();
canvas.forEachObject(function(object){ 
       object.selectable = false; 
});

Answer 3

There is a way like this in option -

selectable: false

      or 

object.set({selectable:false})

      or


 object.selectable = false;

Answer 4

On a parent HTML element use css property pointer-events :

.locked {
    pointer-events: none;
}

To set this property from javascript:

let canvasElement = document.getElementsByClassName("canvas-container")[0]
canvasElement.classList.add("locked")

To unlock canvas:

canvasElement.classList.remove("locked")

Answer 5

canvas._objects.forEach(obj => {obj.selectable = false;});
canvas.discardActiveObject();

This should do the trick! discardActiveObject should fire events that request a rerender, so you don't need to manually invoke renderAll . In general, you should always use requestRenderAll instead of renderAll .