我们在 Fabric.js 中有画布修改事件吗？

Posted 2023-03-24

【中文标题】我们在 Fabric.js 中有画布修改事件吗？

【英文标题】：Do we have canvas Modified Event in Fabric.js?

【发布时间】：2013-09-01 16:06:32

【问题描述】：

在 Fabric.js 中，我们有对象修改事件，例如 object:modified。整个画布是否有类似的事件。

实际上我正在尝试实现撤消和重做功能。如果画布上发生任何事情，我会将画布保存为 JSON，然后再次加载以进行撤消功能。

对于 Fabric.js 中的这个特性，我们有什么更好的解决方案吗？

【问题讨论】：

您认为此事件与“object:modified”有何不同？ “object:modifed”涵盖了画布上的所有修改情况，因为任何修改都意味着对象更改（除了画布背景颜色之类的东西，但这通常不应该是撤消/重做的一部分）

当我们向画布对象添加任何新对象时：修改事件未触发。只有当我们对任何添加的对象执行修改（缩放、旋转等）时它才会触发。

你可以使用 "object: added" 和/或 "object:removed" — fabricjs.com/events

@kangax 这些事件似乎不会在 setBackgroundColor、setHeight 或 setWidth 操作上触发。

【参考方案1】：

不要忘记检查添加/删除的对象。你可以这样实现它：

var canvasModifiedCallback = function() 
console.log('canvas modified!');
;

canvas.on('object:added', canvasModifiedCallback);
canvas.on('object:removed', canvasModifiedCallback);
canvas.on('object:modified', canvasModifiedCallback);

【参考方案2】：

这在link 中有更好的解释。以这种方式使用它：

canvas.on('object:moving', function(e)  // or 'object:added'
  var activeObject = e.target;
  console.log(activeObject.get('left'), activeObject.get('top'));
);