如何防止在 fabricjs 上创建后选择对象 canvas

Question

我有一个对象，单击它会在我的 canvas 上生成图像。如何禁用此生成的图像对象的选择？

我在代码中添加了以下内容：canvas.selection = false; 这将禁用使用单击功能选择对象，但对于添加的任何新图像对象，它不起作用。

示例（点击最小的蓝点）：https://codepen.io/twan2020/pen/yLVbvGb 蓝点不能移动，但是添加的图片可以移动。

我已经尝试添加以下行：printzelf.selection = false 在创建图像的函数中，但这仍然不起作用。我也尝试在参数旁边添加 selection: false，但没有成功。

savebtnclick.onclick = function() {
  var imgURL = 'https://printzelf.nl/new/assets/images/logo_gewoon.png';
  var printzelfImg = new Image();
  printzelfImg.onload = function (img) {
    var printzelf = new fabric.Image(printzelfImg, {
    width: 350,
    height: 100,
    left: 450,
    top: 70,
    scaleX: .25,
    scaleY: .25,
    id: 'testimg',
    selection: false
    });
    canvas.add(printzelf);
    printzelf.selection = false;
  };
  printzelfImg.src = imgURL;
}

如何禁用所有选择？包括新添加的对象？将其更改为静态 canvas 不是一种选择，因为我失去了太多功能。

Answer 1

fabric.js 为名为 selectable 的图像 class 提供了一个属性。如果设置为 false，则无法 move/rotate/scale 图片。

  printzelfImg.onload = function (img) {
    var printzelf = new fabric.Image(printzelfImg, {
    width: 350,
    height: 100,
    left: 450,
    top: 70,
    scaleX: .25,
    scaleY: .25,
    id: 'testimg',
    selectable: false
    });
    canvas.add(printzelf);
    printzelf.selection = false;
  };

如何防止在 fabricjs 上创建后选择对象 canvas

How to prevent selection of an object after creation on fabricjs canvas

javascript

canvas

html5-canvas

fabricjs