Fabric js禁用对象取消选择

约翰·玛格诺利亚

防止所选结构对象被取消选择的最佳方法是什么?

这一直有效,直到您单击所选对象之外的另一个对象。https://codepen.io/anon/pen/KrPdgQ

canvas.on('object:selected', function(e){
  currentObject = e.target;

  // Disable all objects
  var objects = canvas.getObjects();
  for (var i = 0; i < objects.length; i++) {
    objects[i].selectable = false;
  }

  currentObject.selectable = true;
});

canvas.on('selection:cleared', function(e){
  canvas.setActiveObject(currentObject).renderAll();
});
马里乌斯·图尔库

您可以使用object.evented.

var canvas = new fabric.Canvas('c');
canvas.selection = false;

var rec = new fabric.Rect({
  top: 10,
  left: 10,
  width: 75,
  height: 100,
  fill: 'yellow',
  stroke: 'blue',
  strokeWidth: 2
});

canvas.add(rec);

var rec2 = new fabric.Rect({
  top: 140,
  left: 210,
  width: 85,
  height: 100,
  fill: 'red',
  evented:false,
  stroke: 'orange',
  strokeWidth: 2, 
  selectable: false
});

canvas.add(rec2);

var currentObject = rec;

canvas.setActiveObject(rec);

canvas.renderAll();

canvas.on('object:selected', function(e){
  currentObject = e.target;
 
  // Disable all objects
  var objects = canvas.getObjects();
  for (var i = 0; i < objects.length; i++) {
    if(objects[i].left!=currentObject.left &&
      objects[i].top!=currentObject.top)
   { objects[i].selectable = false;
    objects[i].evented = false;}
  }

  currentObject.selectable = true;
});

canvas.on('selection:cleared', function(e){
  canvas.setActiveObject(currentObject).renderAll();
});

// Button de-select object
document.getElementById("object-deselect").onclick = function() {
  currentObject = null;
  
  canvas.deactivateAll();
  
  // Enable selection all objects
  var objects = canvas.getObjects();
  for (var i = 0; i < objects.length; i++) {
    objects[i].selectable = true;
    objects[i].evented = true;
  }
  
  canvas.renderAll();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<p>Disable de-selecting object
<button id="object-deselect" type="button">Manually Deselect</button></p>

<canvas id="c" width="400" height="330" style="border:1px dotted red"></canvas>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Fabric JS中取消选择对象

来自分类Dev

禁用对象选择上的鼠标事件,并在Fabric JS中清除对象选择后启用它

来自分类Dev

Fabric.js-如何在不释放鼠标键的情况下取消选择对象并选择组

来自分类Dev

Fabric JS右键单击选择对象

来自分类Dev

Fabric JS父子对象

来自分类Dev

Fabric JS 对象缩放

来自分类Dev

如何禁用选择自由绘制Fabric.js

来自分类Dev

使用Fabric.js选择画布上的所有对象

来自分类Dev

如何以编程方式选择Fabric.js对象

来自分类Dev

如何以编程方式选择Fabric.js对象

来自分类Dev

如何在fabric.js中选择和拖动对象

来自分类Dev

Fabric.js计数对象

来自分类Dev

Fabric JS中的BringForward

来自分类Dev

画布旋转 - Fabric js

来自分类Dev

缩放fabric.js画布对象

来自分类Dev

对象数据随机更改Fabric.js

来自分类Dev

使用mouse:Fabric JS:覆盖动画对象

来自分类Dev

Fabric.js:按名称获取对象

来自分类Dev

在Fabric.js中调整对象大小

来自分类Dev

Fabric.js动画对象/图像

来自分类Dev

Fabric.js:按名称获取对象

来自分类Dev

fabric.js:通过boundingbox移动对象

来自分类Dev

Fabric.js 从 toDataURL 中删除对象

来自分类Dev

fabric js:对象分组无法正常工作

来自分类Dev

如何在Fabric.js中停止/取消requestAnimFrame()

来自分类Dev

如何仅通过Fabric.js单击实际内容来选择对象

来自分类Dev

Fabric.js路径对象由于宽度和高度而无法选择

来自分类Dev

Fabric.js的几何形状

来自分类Dev

如何设置Fabric.js?