无意中找到了百度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);