取消选择 fabric.js 对象事件答案

【问题标题】：Deselection fabric.js object event取消选择 fabric.js 对象事件
【发布时间】：2021-05-10 15:36:00
【问题描述】：

每次“取消选择”特定结构对象时，我都会尝试执行一些代码。我可以处理任何取消选择事件吗？我已经有了一个函数，当对象被选中时，通过 selected 事件，但还没有找到任何关于取消选择的文档。在画布级别，我有 selection:cleared 和 selection:created 事件，但也没有取消选择。

干杯，贡萨洛

【问题讨论】：

标签： fabricjs

【解决方案1】：

使用before:selection:cleared 事件并获取活动对象或组。之后，您可以检查它是否对应于您的特定织物对象。

canvas.on('before:selection:cleared', function() {
    var clearedObject;
    if(typeof(canvas.getActiveObject()) !== 'undefined') {
        clearedObject = canvas.getActiveObject();
    }
    else {
        clearedObject = canvas.getActiveGroup();
    }
    //do stuff with the deselected element if it is the specific one you want.
});

【讨论】：

第 3 行有一个小错字，右括号应该在 .getActiveObject() 调用之后。另外，最后一行缺少“)”。

【解决方案2】：

只是为了让大家知道Fabric.js 的最新版本包含Object class 的deselected 事件。你现在唯一需要做的就是：

var aFabricObject = <create your fabric object>

aFabricObject.on('deselected', function (options) {
     // your code here
});

【讨论】：

文档中也提到了这一点，但不知何故，当取消选择对象时它不会触发！

【解决方案3】：

更新上位answer:
'deselected' 事件触发异步方法，因此您无法立即获取 'options.deselected'。

var aFabricObject = <create your fabric object>

aFabricObject.on('deselected', function (options) {
  console.log(options.deselected) // output undefined
  setTimeout(() => {
    console.log(options.deselected) // output the correct target
  }, 0)
});

【讨论】：