如何禁用选择freedrawing fabricjs答案

【问题标题】：How to disable selection freedrawing fabricjs如何禁用选择freedrawing fabricjs
【发布时间】：2017-05-24 04:26:23
【问题描述】：

在 FabricJs 中使用 FreeDrawing 绘制某些内容后，您可以选择绘制的内容并移动它。有没有办法禁用此选择？

【问题讨论】：

标签： fabricjs

【解决方案1】：

如果您不需要在画布上进行任何交互，您可以使用 StaticCanvas

var canvas = this.__canvas = new fabric.StaticCanvas('c');

或者，如果您只想禁用特定对象的选择，即最后一次笔触，您可以尝试在每次创建笔触时调用以下代码：

canvas.item(0).selectable = false;
canvas.renderAll();

如果您需要其他对象的交互性，您也可以在画布初始化后立即定义它

fabric.Object.prototype.selectable = false;

所有新对象都将是不可选择的，除非您在创建可选择对象时另行指定

var text = new fabric.Text('Honey,\nI\'m subtle', {
    fontSize: 250,
    left: 50,
    top: 0,
    selectable: true // make this object selectable
});
canvas.add(text);

【讨论】：

我如何知道笔划何时创建？我设置的是：canvas.isDrawingMode = true;
如果你总是在绘图模式下使用画布，你怎么会有选择的问题，在你退出绘图模式之前你应该无法选择任何对象
我不总是在绘图模式下使用画布。退出绘图模式后我不想选择任何对象
您可以使用静态画布吗？或者您需要与画布上的其他对象进行交互？
我需要与画布上的其他对象进行交互

【解决方案2】：

如果部分对象需要交互而不是全部对象，可以在创建非交互对象时设置：evented: false。

http://fabricjs.com/docs/fabric.Rect.html#evented

【讨论】：

【解决方案3】：

也可以禁用可选择的角/边框和/或控件。完整代码如下：

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

【讨论】：