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

Question

我在Fabric.js中有以下Rect子类。 它为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);

    }
});

我想为IRect定义特定的事件处理程序。 例如，当用户点击IRect ，我想alert('hello') 。 我应该在哪个子类中执行此操作？ 在定义子类时，如何获得对画布的引用？

代码和问题描述可在以下网址找到： http ： //jsfiddle.net/czcsj2fw/5/

Answer 1

我有同样的问题，我找到了一种方法来做到这一点。 我不确定它的正确方法（我对fabricjs来说还是一个新手！）但它似乎确实有效，至少对于那些微不足道的案例。 基本上画布没有在初始化中定义，但它是在_render中定义的，所以如果你在那里设置事件处理代码它应该工作:)。

它看起来像这样：

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

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

我更新了你的jsfiddle进行演示，它将鼠标点击（鼠标：向下事件）记录到控制台（一次点击就会触发几个事件，所以警报非常烦人 - 认为你可以用cancelbubble或其他东西来阻止它，但要保持简单的避风港为这个例子而烦恼 - http://jsfiddle.net/czcsj2fw/6/

HTH！

Answer 2

最好在第一个地方定义一个处理程序，而不是每次调用_render 。 这会产生太多事件，这将是生产系统上的真正性能问题。 我在这里如何改变上面的jsfiddle javascript代码：

// -----------------------------------------------------------
// 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();

在这里它是从前面分叉的： http ： //jsfiddle.net/gd06n7Lx/1/