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

Posted

技术标签:

【中文标题】我们在 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'));
);

【讨论】:

以上是关于我们在 Fabric.js 中有画布修改事件吗?的主要内容,如果未能解决你的问题,请参考以下文章

使在画布上绘制的形状不可移动(fabric.js)

Fabric.js:100% 宽度的画布可能吗?

fabric.js 组成员的属性不更新?

Fabric.js 3个api设置画布宽高

Fabric.js橡皮擦问题画布

如何使用 fabric.js 禁用画布元素的缩放点?