用于在 fabricjs 画布上选择对象的事件处理程序答案

【问题标题】：Event handler for object selection on fabricjs canvas用于在 fabricjs 画布上选择对象的事件处理程序
【发布时间】：2019-10-16 15:23:08
【问题描述】：

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

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

我看到在selection:created 的问题中提到了这里提到的一个选项和 selection:updatedhttps://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>

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

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

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

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

【讨论】：