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, {
	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() {

	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(); },