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

Question

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

我在我的代码中添加了以下内容： canvas.selection = false; 这会通过单击 function 禁用 object 上的选择，但对于添加的任何新图像 object，它不起作用。

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

我尝试在创建图像的 function 中添加以下行： 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;
}

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

Answer 1

fabric.js 为其图像 class 提供了一个属性，称为selectable 。 如果设置为false ，您将无法移动/旋转/缩放图像。

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