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屋！