微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决在fabricjs画布上创建后如何防止选择对象

我有一个对象,点击后会在我的画布上生成一个图像。如何禁用对这个生成的图像对象的选择?

我在代码添加了以下内容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;
}

如何禁用对所有内容的选择?包括添加的对象?把它改成静态画布不是一个选择,因为我失去了太多的功能

解决方法

fabric.js 为其 Image 类提供了一个名为 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;
  };

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。