源码来自 jtopo交流群(171820448) 中的大神:我不是作者只是咖啡爱好者(616487222)、原博客名:dark
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
var scene = new JTopo.Scene(stage);
var node = new JTopo.Node("节点");
node.textPosition ="Middle_Center";
node.setBound(10, 10,40,40);
node.fontColor="0,0,0";
node.alarm="告警文字\n告警文字\n告警文字告警文字\n告警文字\n告警文字\n告警文字";
node.paintAlarmText = function(a) {
if (null != this.alarm && "" != this.alarm) {
var b = this.alarmColor || "255,0,0",
c = this.alarmAlpha || .5;
a.beginPath(),
a.font = this.alarmFont || "10px 微软雅黑";
var textArray = this.alarm.split('\n');
var rowCnt = textArray.length;
var i = 0, maxLength = 0, maxText = textArray[0];
for(;i<rowCnt;i++){
var nowText = textArray[i],textLength = nowText.length;
if(textLength >=maxLength){
maxLength = textLength;
maxText = nowText;
}
}
var maxWidth = a.measureText(maxText).width;
var lineHeight = 16; // 字体大小 + 6
// alarm框的宽度
var d =( (a.measureText(this.alarm).width/rowCnt +6) > maxWidth? (a.measureText(this.alarm).width/rowCnt +6) : maxWidth);
var e =(lineHeight)*(rowCnt), // alarm 框高度 行高*行数
f = this.width / 2 - d / 2 , // alarm 框横向位置
g = - this.height /2 - e - 20; // alarm 纵横向位置
//
//绘制alarm框
a.strokeStyle = "rgba(" + b + ", " + c + ")",
a.fillStyle = "rgba(" + b + ", " + c + ")",
a.lineCap = "round",
a.lineWidth = 1,
a.moveTo(f -10, g - 10), // 左上 这些10是调整 alarm 边框离文字的距离
a.lineTo(f + d +10, g - 10), // 右上
a.lineTo(f + d +10, g + e + 10), // 右下
a.lineTo(f + d / 2 + 6, g + e + 10),
a.lineTo(f + d / 2, g + e + 8 + 10),
a.lineTo(f + d / 2 - 6, g + e + 10),
a.lineTo(f - 10, g + e + 10), // 左下
a.lineTo(f -10, g -10),
a.fill(),
a.stroke(),
a.closePath(),
a.beginPath(),
a.strokeStyle = "rgba(" + this.fontColor + ", " + this.alpha + ")",
a.fillStyle = "rgba(" + this.fontColor + ", " + this.alpha + ")",
(function(a,b,x,y,textArray){
for(var j= 0;j<textArray.length;j++){
var words = textArray[j];
a.fillText(words,x ,y);
y+= lineHeight;
}
})(a,this,f,g+8,textArray),
a.closePath()
}
}
scene.add(node);
最近发现大神张鑫旭对 canvas 文本操作提供的API,值得推荐:
canvas文本绘制自动换行、字间距、竖排等实现