jtopo 告警 Alarm 换行 demo

来源：互联网发布：淘宝客网站建站模板编辑：程序博客网时间：2024/06/07 01:00
这里写图片描述
<!DOCTYPE html ><html>    <head>        <meta charset="utf-8">        <title>JTOPO 告警alarm文字换行demo</title>        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>        <script src="http://www.jtopo.com/download/jtopo-0.4.8-min.js" type="text/javascript"></script>        <script type="text/javascript">             $(document).ready(function(){                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) {//                  console.log(this)                    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);        });        </script>    </head>    <body>            <canvas width="1000" height="400" id="canvas" style="  border:1px solid #999;">            </canvas>    </body></html>
阅读全文
0 0