jtopo 告警 Alarm 换行 demo

源码来自 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文本绘制自动换行、字间距、竖排等实现