Fabric JS禁用对象取消选择

Question

防止取消选择织物对象的最佳方法是什么？

这将起作用，直到您单击除所选对象之外的其他对象。 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();
});

Answer 1

您可以使用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>