Pixie emits events that let you know what happens inside the editor. You can listen to them by calling the on method either on specific object to listen only for that object events or on whole canvas to listen for all events.

Canvas Event List

var pixie = new Pixie({
    onLoad: function() {
        pixie.get('canvas').on('object:added', function(e) {
            console.log(e.target); // print added object to console
        });
    }
});

General

  • after:render — fired continuously after each frame is rendered
  • before:render — fired before each frame is rendered
  • canvas:cleared — fired after a call to canvas.clear()
  • mouse:over
  • mouse:out
  • mouse:down — fired when mousedown event occurred on canvas
  • mouse:up — fired when mouseup event occurred on canvas
  • mouse:move — fired when the mouse is moving over the canvas
  • mouse:wheel - fired when using the scroll wheel
  • object:added — fired after object has been added
  • object:modified — fired after object is modified (moved, scaled, rotated)
  • object:moving — fired continuously during object movement
  • object:over — fired when mouse is over object (see example below)
  • object:out — fired when mouse is moved away from object (see example below)
  • object:removed — fired when object has been removed
  • object:rotating — fired continuously during object rotating
  • object:scaling — fired continuously during object scaling
  • object:selected — fired when object is selected
  • path:created — fired when (free-drawn) path is created
  • before:selection:cleared — fired before selection is cleared (before active group is destroyed)
  • selection:cleared — fired after selection is cleared (after active group is destroyed)
  • selection:created — fired after selection is created (after active group is created)

Text related

  • text:editing:entered
  • text:editing:exited
  • text:selection:changed
  • text:changed

Object Event List

var pixie = new Pixie({
    onLoad: function() {
        pixie.get('activeObject').on('selected', function(e) {
            console.log('object has been selected');
        });
    }
});

General

  • added
  • removed
  • mousedown
  • mouseup
  • mouseover
  • mouseout
  • modified
  • rotating
  • scaling
  • moving
  • skewing
  • deselected
  • selected

Text related

  • editing:entered
  • editing:exited
  • selection:changed — cursor selection in iText has changed
  • changed
  • dblclick
  • tripleclick