关于百度zrender文字无法居中的问题处理

无意中找到了百度zrender。 不知道是不是故意为之，demo非常少，网上能查到的使用的例子也很少。

做文字框的时候，文字始终无法居中对齐。 后来发现，当设置textAlign: 'center', 时，仅仅是开始位置变为了中间，并不是文字居中。

那么，需要减掉文字的一半长度，作为起始点。x: 200 - name.length *,3, //x,y代表坐标   英文或数据，系数用3，中文用6。

整段代码如下:

var zr = zrender.init(document.getElementById('div_datatota2')); 
var g = new zrender.Group(); 

var name = 'testewtwwtqqqtqwet1';
//ctx.textBaseline = 'middle'; //设置文本的垂直对齐方式 
var rect = new zrender.Rect({
    style: {
        fill: 'none', //填充颜色
        stroke: 'yellow',
        textFill: '#333', //文字颜色
        fontSize: 12, //文字大小
        textBackgroundColor: 'red', //包围盒背景
        textBorderColor: '#ccc', //包围盒描边颜色
        textBorderWidth: 1, //包围盒描边线宽
        text: 'circle',
        textPosition: 'inside',
        brushType: 'fill',
        color: 'rgba(33, 222, 10, 0.8)',
        lineWidth: 5,
    },
    draggable: true,
    shape: {
        x: 200 - 30, //x,y代表坐标
        y: 100 - 10,
        width: 60,
        height: 20,
    }
});

g.add(rect);
zr.add(g);

var text = new zrender.Text({
    style: {
        font: '12px Arial',
        textAlign: 'center',
        textPadding: [0, 0, 0, 0],
        fill: 'white',
        x: 200 - name.length *,3, //x,y代表坐标   英文或数据，系数用3，中文用6。
        y: 100 - 5,
        textWidth: 60,
        text: 'testewtwwtqqqtqwet2'
    }, 
    id: 100,
    z: 2,
})
g.add(text);
zr.add(g);