Question

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-xs-12">Reason<span class="requiredField">*</span></label> <textarea id="textarea"  rows="2"></textarea>

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

fabric.js适用于子类

1 个答案: