我Rect在Fabric.js中有以下子类。它将图像添加到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/
我遇到了同样的问题，并且找到了解决方法。我不确定它的正确方法（我对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进行演示，它将鼠标单击（mouse：down事件）记录到控制台（一键触发了多个事件，因此警报非常烦人-可以使用cancelbubble或其他方式阻止它，但保持它为简单的避风港不必为该示例而烦恼）-http://jsfiddle.net/czcsj2fw/6/
HTH！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句