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 and Events Section 。

Answer 2

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

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');
});