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

jtopo 告警 Alarm 换行 demo相关推荐

jtopo node.text换行_求助：jtopo node文字换行问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼在jtopo 生成前,粘贴以下代码 CanvasRenderingContext2D.prototype.wrapText = function(str, ...
AZURE 日志分析自动告警
小伙伴们好久不见,今天我们来聊聊中国 AZURE 的日志分析告警.为什么是中国 AZURE,目前中国 AZURE 的 Monitor 服务和运维相关周围服务和 Global 是有所不同的,所以有些功能 ...
W800|WIFI|CDK|W80X SDK v1.00.10|官方demo|学习（2）：t-connect
目录官方文档及SDK 1.W800 SDK v1.00.10更新内容: 2. DEMO概要 3.t_connect demo测试 CDK中打开project: Project文件在: 编译完成:编 ...
一封传话聚合推送各语言demo代码示例
一封传话聚合推送各语言demo代码示例前言查看一封传话的API文档的GET请求只需一行代码,在url上拼接head和body参数即可完成推送.这里针对body数据量较大的情况,给出各语言实现的de ...
AWS EC2 instance 监控、告警
1. 在AWS 控制台的EC2 dashboard页面, 'system status check' 表示instance是否可以通过网络访问,如果这个check fails,很有可能是该instan ...
电路图中常用的英文缩写的中文解释
A A 模拟 A/DC模拟信号到数字信号的转换 A/L音频/逻辑板 AAFPCB音频电路板 AB 地址总线 ab 地址总线 accessorier 配件 ACCESSORRIER 配件 ADC(A/O ...
kafka可视化工具_Kafka值得一用的监控系统
文章作者:哥不是小萝莉内容出处:作者本人适用人群:大数据注:欢迎转载,转载请注明出处什么是KAFKA? Apache Kafk ...
审计系统---堡垒机python下ssh的使用
堡垒机python下ssh的使用 [堡垒机更多参考]http://www.cnblogs.com/alex3714/articles/5286889.html [paramiko的Demo实例]htt ...
【skywalking 部署测试】
提示:学习记录 skywalking 部署测试概述一.skywalking 基础测试 1. 基于 docker-compose 或二进制部署 SkyWalkingMarkdown 2. 实现单体服 ...

jtopo 告警 Alarm 换行 demo

jtopo 告警 Alarm 换行 demo相关推荐

最新文章

热门文章