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>