Fabricjs extend class

问题

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?

回答1:

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>

来源：https://stackoverflow.com/questions/34136363/fabricjs-extend-class