Fabricjs扩展类 [英] Fabricjs extend class
问题描述
我已经用fabric.js创建了一个自定义类
var Container = fabric.util.createClass ,{
type:'Container',
initialize:function(options){
this.placedColor ='rgba(211,211,211,1)';
this.virtualModeColor ='rgba(211,211,211,0.5)';
this.setToVirtualMode();
options ||(options = {});
this.callSuper('initialize',options);
this.set({
label:options.label ||'',
'top':options.top || 0,
'left':options.left || 0,
'height':options.height || 50,
'fill':options.fill || this.backgroundColor
};
self = this;
},
/ **
* @描述集渲染模式为虚拟
* /
setToVirtualMode:function(){
this.isInVirtualMode = true;
this.backgroundColor = this.virtualModeColor;
},
/ **
* @description设置渲染模式为放置
* /
setToPlacementMode:function(){
this .isInVirtualMode = false;
this.backgroundColor = this.placedColor;
},
/ **
* @description切换虚拟模式打开和关闭
* /
toggleVirtualMode:function(){
if(this.isInVirtualMode){
this.setToPlacementMode();
} else {
this.setToVirtualMode();
}
this.set('fill',this.backgroundColor);
},
_render:function(ctx){
this.callSuper('_ render',ctx);
}
});
但是当我创建一个新对象Container并将其添加到canvas时,该对象出现,但是不可点击。我在我的画布上有一个处理对象:select事件的事件句柄,但e.target永远不会填充对Container对象的引用。
如何在Container对象上获取工作事件?
i没有看到你的类的任何问题。
确保将其添加到fabric对象,而不是将其声明为标准变量
检查console.log以使e.target正常工作。
fabric.Container = fabric.util.createClass(fabric.Rect,{type:'Container',initialize:function(options){this.placedColor ='rgba(211,211,211,1)' ; this.virtualModeColor ='rgba(211,211,211,0.5)'; this.setToVirtualMode(); options ||(options = {}); this.callSuper('initialize',options); this.set({label: label ||'','top':options.top || 0,'left':options.left || 0,'height':options.height || 50,'fill':options.fill || this。 backgroundColor};; self = this;},/ ** * @描述集渲染模式为virtual * / setToVirtualMode:function(){this.isInVirtualMode = true; this.backgroundColor = this.virtualModeColor;},/ ** * @描述集渲染模式放置* / setToPlacementMode:function(){this.isInVirtualMode = false; this.backgroundColor = this.placedColor; },/ ** * @description切换虚拟模式打开和关闭* / toggleVirtualMode:function(){if(this.isInVirtualMode){this.setToPlacementMode(); } else {this.setToVirtualMode(); } this.set('fill',this.backgroundColor); },_render:function(ctx){this.callSuper('_ render',ctx); }}); var canvas = new fabric.Canvas(canvas2); canvas.add(new fabric.Container({label:'aasdasd',top:10,left:10,height:60,width:200}) ); canvas.on('object:selected',function(e){console.log(e.target);});
< script type =text / javascriptsrc =http://www.deltalink.it/andreab/fabric/fabric.js> < / script>< canvas id =canvas2width = 500 height = 500>< / canvas>
I've created a custom class with fabric.js
var Container = fabric.util.createClass(fabric.Rect, { type: 'Container', initialize: function(options) { this.placedColor = 'rgba(211,211,211, 1)'; this.virtualModeColor = 'rgba(211,211,211, 0.5)'; this.setToVirtualMode(); options || (options = { }); this.callSuper('initialize', options); this.set({ label : options.label || '', 'top' : options.top || 0, 'left': options.left || 0, 'height' : options.height || 50, 'fill' : options.fill || this.backgroundColor }); self = this; }, /** *@description set render mode to virtual */ setToVirtualMode : function () { this.isInVirtualMode = true; this.backgroundColor = this.virtualModeColor; }, /** * @description set render mode to placement */ setToPlacementMode : function(){ this.isInVirtualMode = false; this.backgroundColor = this.placedColor; }, /** * @description toggle virtual mode on and off */ toggleVirtualMode : function(){ if (this.isInVirtualMode){ this.setToPlacementMode(); }else{ this.setToVirtualMode(); } this.set('fill', this.backgroundColor); }, _render: function(ctx) { this.callSuper('_render', ctx); } });
But when I create a new object Container and add it to canvas the object appears but it's not clickable. I have an event handle on my canvas that handles object:selected event but the e.target is never populated with the reference to Container object.
How to get working events on Container object?
解决方案i do not see any problem with your class. Be sure to add it to fabric object instead of declaring it as a standard variable
Check the console.log for e.target working correctly.
fabric.Container = fabric.util.createClass(fabric.Rect, { type: 'Container', initialize: function(options) { this.placedColor = 'rgba(211,211,211, 1)'; this.virtualModeColor = 'rgba(211,211,211, 0.5)'; this.setToVirtualMode(); options || (options = { }); this.callSuper('initialize', options); this.set({ label : options.label || '', 'top' : options.top || 0, 'left': options.left || 0, 'height' : options.height || 50, 'fill' : options.fill || this.backgroundColor }); self = this; }, /** *@description set render mode to virtual */ setToVirtualMode : function () { this.isInVirtualMode = true; this.backgroundColor = this.virtualModeColor; }, /** * @description set render mode to placement */ setToPlacementMode : function(){ this.isInVirtualMode = false; this.backgroundColor = this.placedColor; }, /** * @description toggle virtual mode on and off */ toggleVirtualMode : function(){ if (this.isInVirtualMode){ this.setToPlacementMode(); }else{ this.setToVirtualMode(); } this.set('fill', this.backgroundColor); }, _render: function(ctx) { this.callSuper('_render', ctx); } }); var canvas = new fabric.Canvas("canvas2"); canvas.add(new fabric.Container({label: 'aasdasd', top: 10, left: 10, height: 60, width:200})); canvas.on('object:selected', function(e) { console.log(e.target); });
<script type="text/javascript" src="http://www.deltalink.it/andreab/fabric/fabric.js" ></script> <canvas id="canvas2" width=500 height=500 ></canvas>
这篇关于Fabricjs扩展类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!