时间戳

首页 > 解决方案 > 用于在 fabricjs 画布上选择对象的事件处理程序

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

问题描述

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

我尝试使用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>

标签： javascriptfabricjs

解决方案

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

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

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

推荐阅读