Fabric.js 对象：已选择，未选择对象

Question

使用 Fabric.js，我正在处理一个名为 header 的文本对象。当标题区域被选中时，一个 div 会淡入，并带有两个可用于设置文本和填充的输入字段。这对我有用。

接下来我要尝试处理的是，当取消选择标题对象时，我将淡出我的 div。处理 header.off() 的正确方法是什么？

header.on('selected', function() {

  $('#header-text-edit').fadeIn('fast');

  // watch for header.input changes
  scope.$watch("header.input", function(value) {
    header.text = scope.header.input;
  });

  // watch for header.color changes
  scope.$watch("header.color", function(value) {
    header.fill = scope.header.color;
  });
});

Answer 1

你需要：

canvas.on('selection:cleared', function() {
  ...
});

看看教程中的Events Demo 和Events Section。

Answer 2

对于fabricjs 2.0 branch，画布上的选择事件应如下所示：

canvas.on('selection:created', function () {
   //...
});

canvas.on('selection:cleared', function () {
   //...
});

selected 事件适用于画布上的单个对象

var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });
rect.on('selected', function() {
    console.log('selected a rectangle');
});