问题
After you draw something with FreeDrawing in FabricJs, you are able to select what was drawn and move it. Is there a way to disable this selection?
回答1:
In case you don't need any interactivity on your canvas, you can use StaticCanvas
var canvas = this.__canvas = new fabric.StaticCanvas('c');
Or, in case you want to disable selection only for specific objects, i.e. the last brush stroke, you can try calling the following code every time the stroke is created:
canvas.item(0).selectable = false;
canvas.renderAll();
If you need interactivity for other objects, you can also define this right after canvas initialization
fabric.Object.prototype.selectable = false;
all new objects will be non-selectable, unless you specify otherwise when you want to create a selectable object
var text = new fabric.Text('Honey,\nI\'m subtle', {
fontSize: 250,
left: 50,
top: 0,
selectable: true // make this object selectable
});
canvas.add(text);
回答2:
In case of needing interactivity in some objects but not in all of them, you can set: evented: false
in the creation of non interactive objects.
http://fabricjs.com/docs/fabric.Rect.html#evented
回答3:
The selectable corners / borders and/or controls can be disabled as well. Here is the full code:
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
canvas.selection = false;
fabric.Image.fromURL(src, function (img) {
height = img.getBoundingRectHeight();
width = img.getBoundingRectWidth();
var oImg;
oImg = img
.set({ hasControls: false, hasBorders: false, selectable: false })
.scale(factor);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
}, { crossOrigin: 'anonymous' });
来源:https://stackoverflow.com/questions/25038404/how-to-disable-selection-freedrawing-fabricjs