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>