Fabric js отключить отмену выбора объекта - PullRequest
Новая
       9

Fabric js отключить отмену выбора объекта

0 голосов
/ 02 ноября 2018

Каков наилучший способ предотвращения отмены выбора выбранного объекта ткани?

Это работает, пока вы не нажмете на другой объект, кроме выбранного. 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();
});

1 Ответ

0 голосов
/ 02 ноября 2018

Вы можете использовать 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>
...