Fabricjs 画布上对象选择的事件处理程序

Question

我有一个包含一些元素的画布，我想在用户在画布上选择一个元素（单击一个元素）时添加一个事件处理程序。

我尝试使用selection: created和object: selected事件来处理相同的问题，但它仅在用户选择一个元素然后单击画布中的其他位置，然后尝试选择另一个元素时才有效，但当用户单击一个元素时（事件处理程序）触发），然后单击事件处理程序未触发的另一个元素。我该如何处理这个问题？

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 
}