如何以编程方式触发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/

- Ogreucha

Answer 1

您可以使用 canvas.trigger('<eventname>', options); 触发事件。由于fire方法已被弃用，因此最好避免使用它。

如果您想要触发object:modified事件，可以通过以下方式实现，并传递被修改的对象：

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

我已经更新了你的JSFiddle，并添加了解决方案。注意我已将alert更改为console.log，因为我认为弹出警告很烦人，你可以在开发者工具中查看console.log的输出，例如在Google Chrome中按下F12即可。

- leroydev

---

谢谢，这正是我所需要的。我怎么会错过选项参数呢？真丢人 :) - Ogreucha

你也可以在不传递对象的情况下使用触发器方法。例如，我的项目在任何对象修改事件上调用一个函数，因此我使用以下方式的触发器方法： canvas.trigger('object:modified') - Orkun Tuzel

Answer 2

版本4的重大变化

与此同时，您应该使用fire。

canvas.fire('object:modified');

在可观察的 mixin 中，已经移除了 observe、stopObserving 和 trigger 这些方法。 请继续使用 on、off 和 fire。这些名称更短，而且所有的文档都使用这些名称。

更多详情请参见版本 4 的变化。

- amp-sys