Question

我已经使用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);
    }
});

但是当我创建一个新的对象Container并将其添加到画布时，该对象会出现，但它不可点击。我的画布上有一个处理object：event事件的事件句柄，但e.target从不填充对Container对象的引用。

如何在Container对象上获取工作事件？

Answer 1

我认为你班上没有任何问题。请务必将其添加到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 : 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扩展了类

1 个答案: