9

In Fabric.js we have Object modified events like object:modified. Do we have similar event for the entire canvas.

Actually I am trying to implement undo and redo features. I am saving the canvas as JSON if something happens on it and loading it again for undo feature.

Do we have any better solution for this features in Fabric.js?

kangax
  • 38,898
  • 13
  • 99
  • 135
user2571818
  • 273
  • 4
  • 9
  • How do you expect this event to be different from "object:modified"? "object:modifed" covers all cases of modification on canvas, since any modification implies object change (except something like canvas background color, but that's usually not supposed to be part of undo/redo) – kangax Aug 29 '13 at 23:10
  • When we are adding any new objects to canvas object:modified event is not firing. It is firing only when we perform modifications(scaling,rotating etc) on any added object. – user2571818 Sep 02 '13 at 07:07
  • 3
    You can use "object:added" and/or "object:removed" for that — http://fabricjs.com/events/ – kangax Sep 02 '13 at 08:44
  • @kangax Those events don't appear to be triggered on setBackgroundColor, setHeight, or setWidth actions. – Michael J. Calkins Jan 15 '14 at 19:04

2 Answers2

5

Don't forget to check for added/removed objects too. You could implement it like this:

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

canvas.on('object:added', canvasModifiedCallback);
canvas.on('object:removed', canvasModifiedCallback);
canvas.on('object:modified', canvasModifiedCallback);
Tomh
  • 332
  • 3
  • 7
3

This is better explained in this link. Use it this way:

canvas.on('object:moving', function(e) { // or 'object:added'
  var activeObject = e.target;
  console.log(activeObject.get('left'), activeObject.get('top'));
});
jdrake
  • 333
  • 4
  • 17
Ikrom
  • 4,785
  • 5
  • 52
  • 76