How to disable selection freedrawing fabricjs

狂风中的少年 提交于 2021-02-18 12:14:11

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!