【Fabric.js】监听画布or元素的点击、选中、移动、添加、删除销毁、变形等各事件

在Fabric.js中，你可以监听画布和元素的各种事件，通过为画布实例设置相应的事件监听器来实现。以下是一些常用事件及其监听器的示例代码：

// 假设你已经有一个fabric.Canvas实例叫做canvas
 
// 元素被点击
canvas.on('object:selected', function(e) {
  var object = e.target;
  console.log('Element clicked:', object);
});
 
// 元素被移动
canvas.on('object:moving', function(e) {
  var object = e.target;
  console.log('Element moving:', object);
});
 
// 元素被添加到画布
canvas.on('object:added', function(e) {
  var object = e.target;
  console.log('Element added:', object);
});
 
// 元素被删除
canvas.on('object:removed', function(e) {
  var object = e.target;
  console.log('Element removed:', object);
});
 
// 元素销毁
canvas.on('object:destroyed', function(e) {
  var object = e.target;
  console.log('Element destroyed:', object);
});
 
// 元素变形开始
canvas.on('object:modified', function(e) {
  var object = e.target;
  console.log('Element modified (begin of transformation):', object);
});
 
// 元素变形结束
canvas.on('object:modified', function(e) {
  var object = e.target;
  console.log('Element modified (end of transformation):', object);
});

这些事件监听器可以帮助你在Fabric.js应用中实现交互式的用户界面。记住，object:modified 事件在变形开始和结束时都会触发，你可以通过检查变形动画的状态来区分开始和结束。