如何以编程方式触发 fabric.js “object:modified” 事件？

Question

我想以编程方式触发 'object:modified' 事件。 我已经尝试过“火”和“触发”方法。

var canvas = new fabric.Canvas('c');

canvas.on("object:modified", function (e) {
    alert("object modified");
});

var text = new fabric.Text('Text', {
  fontFamily: 'Hoefler Text',
  left: 10,
  top: 10
});

canvas.add(text);

$('.fillText').click(function(){
  text.setFill($(this).data('color'));
  canvas.renderAll();

  text.trigger('modified');
});

$('#moveText').click(function(){
  text.setLeft(50);
  text.setTop(50);
  text.setCoords();
  canvas.renderAll();

  text.trigger('modified');
});

https://jsfiddle.net/gb4u85q4/

Answer 1

您可以使用canvas.trigger('<eventname>', options);触发事件canvas.trigger('<eventname>', options); . fire已被弃用，因此您可能应该避免使用它。

由于您想触发object:modified ，您可以通过以下方式执行此操作，同时传递已修改的对象：

canvas.trigger('object:modified', {target: text});

我使用添加到其中的解决方案更新了您的JSFiddle 。 :)（注意我把alert改成了console.log因为我觉得alerts很烦人，你可以在开发者工具中查看console.log的输出，比如谷歌浏览器可以按F12打开）

Answer 2

版本 4 重大更改

同时你应该使用fire 。

canvas.fire('object:modified');

在 observabile mixin observe ， stopObserving ， trigger被删除。 继续使用on 、 off 、 fire 。 那些更短，而且我们所有的文档都引用了这种名称。

有关更多详细信息，请参阅第 4 版重大更改。