我们在 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 中有画布修改事件吗?的主要内容,如果未能解决你的问题,请参考以下文章