fabricjs 上对象选择的事件处理程序 canvas

Question

我有一个包含一些元素的 canvas，我想在用户 select 在 canvas 上添加一个元素（点击一个元素）时添加一个事件处理程序.

我尝试使用 selection: created 和 object: selected 事件来处理相同的事件，但它仅在用户 select 一个元素然后单击 [=32] 中的其他地方时才有效=] 然后尝试 select 另一个元素它完美地工作，但是当用户单击一个元素（触发事件处理程序）然后单击另一个元素时，事件处理程序不会触发。我该如何处理？

我看到在 selection:created 的问题中有一个选项可以使用 selection:updated https://github.com/fabricjs/fabric.js/issues/4886

但是有什么办法可以一起使用它们吗？

const canvas = new fabric.Canvas('paper', {
  preserveObjectStacking: true,
  enableRetinaScaling: false,
  imageSmoothingEnabled: false
});
canvas.setHeight(500);
canvas.setWidth(700);


const red = new fabric.Rect({
 id: 'red',
  left: 10,
  top: 10,
  width: 100,
  height: 100,
  fill: 'red'
});

const green = new fabric.Rect({
 id: 'green',
  left: 150,
  top: 150,
  width: 100,
  height: 100,
  fill: 'green'
});

canvas.add(red);
canvas.add(green);

canvas.renderAll();

canvas.on("selection:created", function(obj){
 alert(obj.target.id)
});
canvas.on("selection:updated", function(obj){
 alert(obj.target.id)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

Answer 1

这是一个非常简单的解决方案，将两个事件处理程序组合在一起并将它们链接到同一个方法将是一个简单的解决方案，任何更好的解决方案将不胜感激。

canvas.on({
  'selection:updated': HandleElement,
  'selection:created': HandleElement
});

function HandleElement(obj){
   //Handle the object here 
}

fabricjs 上对象选择的事件处理程序 canvas

Event handler for object selection on fabricjs canvas

javascript

fabricjs