fabric.js使用子类

Question

我尝试使用fabric.js框架创建新类。这个类应该由3个简单对象组成：2个文本和1个矩形。文本对象之一应该按时间更新，例如每秒更新一次。问题是新的值没有按预期显示在画布上，但每次选择对象时都会更新。这是我的code。任何人都可以解释我，我应该怎么做才能让它按时更新？

var canvas = new fabric.Canvas('c'); 

fabric.Tag = fabric.util.createClass(fabric.Group, { 
    type: 'PItag', 

initialize: function() { 

    options = {}; 

    options.top  = 0; 
    options.left = 0; 

    var defaults = { 
     width: 100, 
     height: 40, 
     originX: 'center', 
     originY: 'center' 
    }; 

    var defaults1 = { 
     width: 100, 
     height: 20, 
     originX: 'center', 
     originY: 'top', 
     top: -20, 
     backgroundColor: 'red' 
    }; 

    var defaults2 = { 
     width: 100, 
     height: 20, 
     originX: 'center', 
     originY: 'top', 
     top: 0 
    }; 

    var items = []; 

    items[0] = new fabric.Rect($.extend({}, defaults, { 
     fill: '#77AAFF', 
    })); 

    items[1] = new fabric.Textbox('PI tag name', $.extend({}, defaults1, { 
     textAlign: 'center', 
     fontSize: 14 
    })); 

    items[2] = new fabric.IText('####', $.extend({}, defaults2, { 
     textAlign: 'center', 
     fontSize: 16 
    })); 

    this.callSuper('initialize', items, options); 

}, 

getTagName: function() { 
    return this._objects[1].text; 
}, 

setTagName: function (value) { 
    this._objects[1].text = value; 
}, 

getValue: function() { 
    return this._objects[2].text; 
}, 

setValue: function (value) { 
    this._objects[2].text = value; 
    this.canvas.renderAll(); 
}, 

_render: function(ctx) { 
    this.callSuper('_render', ctx);   
} 

}); 
var pi = new fabric.Tag(); 

pi.setTagName("Unix time"); 
canvas.add(pi); 

setInterval(function() { 
    pi.setValue(Math.floor((new Date()).getTime()/1000).toString()); 
    canvas.renderAll(); 
}, 1000); 

Answer 1

var canvas = new fabric.Canvas('c'); 
 

 
fabric.Tag = fabric.util.createClass(fabric.Group, { 
 
\t type: 'PItag', 
 

 
initialize: function() { 
 

 
    options = {}; 
 
    options.left = 100; 
 
    options.top=100; 
 

 
    var defaults = { 
 
     width: 100, 
 
     height: 40, 
 
     originX: 'center', 
 
     originY: 'center' 
 
    }; 
 

 
    var defaults1 = { 
 
     width: 100, 
 
     height: 20, 
 
     originX: 'center', 
 
     originY: 'top', 
 
     top: -20, 
 
     backgroundColor: 'red' 
 
    }; 
 

 
    var defaults2 = { 
 
     width: 100, 
 
     height: 20, 
 
     originX: 'center', 
 
     originY: 'top', 
 
     top: 0 
 
    }; 
 

 
    var items = []; 
 

 
    items[0] = new fabric.Rect($.extend({}, defaults, { 
 
     fill: '#77AAFF', 
 
    })); 
 

 
    items[1] = new fabric.Textbox('PI tag name', $.extend({}, defaults1, { 
 
     textAlign: 'center', 
 
     fontSize: 14 
 
    })); 
 

 
    items[2] = new fabric.IText('####', $.extend({}, defaults2, { 
 
     textAlign: 'center', 
 
     fontSize: 16 
 
    })); 
 

 
    this.callSuper('initialize', items, options); 
 

 
}, 
 

 
getTagName: function() { 
 
    return this._objects[1].text; 
 
}, 
 

 
setTagName: function (value) { 
 
    this._objects[1].text = value; 
 
}, 
 

 
getValue: function() { 
 
    return this._objects[2].text; 
 
}, 
 

 
setValue: function (value) { 
 
    this._objects[2].set({ text: value }); 
 
    this.canvas.renderAll(); 
 
}, 
 

 
_render: function(ctx,noTransform) { 
 

 
console.log('xs') 
 
    this.callSuper('_render', ctx); 
 
    //ctx._objects[1].text = this._objects[1].text; 
 

 
} 
 

 
}); 
 
var pi = new fabric.Tag(); 
 
// canvas.pi.async = true; 
 
pi.setTagName("Unix time"); 
 

 
    canvas.add(pi); 
 
setInterval(function() { 
 

 
\t pi.setValue(Math.floor((new Date()).getTime()/1000).toString()); 
 
    canvas.renderAll(); 
 
}, 1000);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<canvas id="c" height="418" width="400" style="border: 1px solid rgb(170, 170, 170);"></canvas>

只是改变这一功能 setValue: function (value) { this._objects[2].set({ text: value }); this.canvas.renderAll(); },