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/

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

2 个答案: