版本4的重大更改

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);触发事件。不推荐使用fire，因此您应该避免使用它。

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

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

我使用添加的解决方案更新了您的JSFiddle。 :) （请注意，我将alert更改为console.log，因为我发现警报很烦人，您可以在开发者工具中查看console.log的输出，这些工具可以在例如Google Chrome中打开按F12）

Answer 2

版本4的重大更改

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

canvas.fire('object:modified');

在可观察的混合observe中，stopObserving，trigger被删除。继续使用on，off，fire。那些较短，而且我们所有文档中指的是这种名称。

有关更多详细信息，请参见Version 4 breaking changes。

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

2 个答案:

版本4的重大更改