fabric.js fonctionne avec la sous-classe

Question

J'essaie de créer une nouvelle classe en travaillant avec le framework fabric.js. Cette classe devrait être composée de 3 objets simples: 2 textes et 1 rectangle. Un objet texte doit être mis à jour par heure, par exemple chaque seconde. Le problème est que la nouvelle valeur n'apparaît pas sur le canevas comme prévu, mais elle se met à jour chaque fois que vous sélectionnez un objet. Voici mon code. Quelqu'un pourrait-il m'expliquer, que dois-je faire pour le mettre à jour avec le temps?

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>

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