如何在Fabric.js子类中定义事件处理程序？

Question

I have the following subclass of Rect in Fabric.js. It adds an image to a Rect.

var IRect = fabric.util.createClass(fabric.Rect, {
    type: 'iRect',
    initialize: function(options) {
        options || (options = { });
        this.callSuper('initialize', options);
    },

    fromObject: function (object, callback) {
        return new IRect(object);
    },

    toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {});
    },

    _render: function(ctx) {
        this.callSuper('_render', ctx);
        var c = document.getElementById('canvas');
        var img = document.getElementById('info');
        c.getContext('2d').drawImage(img, -this.width/2, -this.height/2);

    }
});

I want to define specific event handlers for IRect . For instance, when user clicks on an IRect , I want to alert('hello') . Where should I do this in my subclass ? How can I get a reference to the canvas while I am defining the subclass ?

Code and problem description can be found at: http://jsfiddle.net/czcsj2fw/5/

Answer 1

I had the same problem and I found a way to do it. I'm not sure its the correct way (I'm still very new to fabricjs!) but it does seem to work, at least for the trivial case. Basically the canvas isn't defined in initialise, but it is defined in _render, so if you set up your event handling code in there it should work :).

It looks like this :

_render: function(ctx) {
    this.callSuper('_render', ctx);
    // custom rendering code goes here ...

    this.canvas.on('mouse:down', function(e) {
        console.log('mouse down ' + e);
    });
}

I updated your jsfiddle to demonstrate, it logs mouse clicks (mouse:down event) to the console (you get several events fired for one click so alert is pretty annoying - reckon you can stop it with cancelbubble or something but to keep it simple haven't bothered for the example) - http://jsfiddle.net/czcsj2fw/6/

HTH!

Answer 2

It's better to define a handler on the first place, not each time _render called. This yields too many events and it would be a real performance issue on a production system. Here how I changed the above jsfiddle javascript code:

// -----------------------------------------------------------
// This is my subclass
var IRect = fabric.util.createClass(fabric.Rect, {
    type: 'iRect',
    initialize: function(options) {
        options || (options = { });
        this.callSuper('initialize', options);

        // var canvas = ??? how to get the canvas where this is displayed ?
        // canvas.on('mouse:up', function(){...}
    },

    fromObject: function (object, callback) {
        return new IRect(object);
    },

    toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), {});
    },

    _render: function(ctx) {
        this.callSuper('_render', ctx);
        var img = document.getElementById('info');
        //
        // ctx is the 2d context, no need to get it again from canvas
        //
        ctx.drawImage(img, -this.width/2, -this.height/2);        
    }
});

// -----------------------------------------------------------
// This code will go to my HTML file

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

// Moved here to make it register once
canvas.on('mouse:down', function(e) {
    console.log('mouse down ' + e);
});

var iRect = new IRect({
    width: 200,
    height: 100,
    left: 100,
    top: 50,
    fill: '#888'
});
canvas.add(iRect);
canvas.renderAll();

And here it is forked from the previous: http://jsfiddle.net/gd06n7Lx/1/