Fabricjs中canvas的事件绑定

var canvas = new fabric.Canvas('c')

canvas.on({key:value,.....})  //key为eventname

canvas.on('eventname',fun)

canvas事件绑定源码↓

  /**
   * Observes specified event
   * @memberOf fabric.Observable
   * @alias on
   * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})
   * @param {Function} handler Function that receives a notification when an event of the specified type occurs
   * @return {Self} thisArg
   * @chainable
   */
  function on(eventName, handler) {
    if (!this.__eventListeners) {
      this.__eventListeners = {};
    }
    // one object with key/value pairs was passed
    if (arguments.length === 1) {
      for (var prop in eventName) {
        this.on(prop, eventName[prop]);
      }
    } else {
      if (!this.__eventListeners[eventName]) {
        this.__eventListeners[eventName] = [];
      }
      this.__eventListeners[eventName].push(handler);
    }
    return this;
  }

on的参数有两种格式：

1canvas.on(eventname,fn); //绑定单个事件

2canvas.on({eventname1:fn1,eventname2:fn2}); //绑定多个事件

以下列出所有的event

• object
  • :modified
  • :rotating
  • :scaling
  • :moving
  • :skewing
• before
  • :transform
  • :selection:cleared
• selection
  • :cleared
  • :updated
  • :created
• path
  • :created
• mouse
  • :down
  • :move
  • :up
  • :down:before
  • :move:before
  • :up:before
  • :over
  • :out
  • dbclick
• event
  • :dragover
  • :dragenter
  • :dragleave
• drop
  • :before
• event
  • :drop
• after
  • :render
• before
  • :render