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

Question

我想以编程方式触发'object:modified'事件.我已经尝试过"fire"和"trigger"方法.

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);.fire已弃用,因此您应该避免使用它.

由于您想要触发object:modified,您可以通过以下方式执行此操作,同时传递修改了哪个对象:

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

我用添加到它的解决方案更新了你的JSFiddle.:)(请注意,我将其更改alert为a console.log因为我发现警报很烦人,您可以查看console.log开发人员工具中的输出,可以通过按F12在Google Chrome中打开)

Answer 2

版本 4 重大更改

同时你应该使用fire.

canvas.fire('object:modified');

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

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