javascript - paper - Fabricjs extiende clase

fabric.js tutorial

Question

Creé una clase personalizada con 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);
}
});

Pero cuando creo un nuevo contenedor de objetos y lo agrego al lienzo aparece el objeto, pero no se puede hacer clic en él. Tengo un identificador de evento en mi lienzo que maneja el objeto: evento seleccionado, pero el e.target nunca se rellena con la referencia al objeto contenedor.

¿Cómo obtener eventos de trabajo en el objeto contenedor?

Answer 1

No veo ningún problema con tu clase. Asegúrese de agregarlo al objeto Fabric en lugar de declararlo como una variable estándar

Compruebe console.log para que e.target funcione correctamente.

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>