需求：封装consul服务的webUI；
原因：展示consul的服务信息时，需要嵌套动画，由于其没有内置的icon，所以将服务name放于图片位；
分析：展示信息时采用了卡片式的服务布局，缩放式的服务卡片，只有将服务名称作为图片才能实现动画效果；
最基础动画：
->
实现：将服务名称置于canvas画布中，再将画布转为图片
代码实现：
1、获取dom
/** * 获取service卡片中img对象并赋值src * @param serviceName 服务名称 */ setImageSrc(serviceName) { //因为src不是该HTMLElement类型的属性，而是HTMLImageElement。 let image = <HTMLImageElement>document.querySelector("#nameImage" + serviceName); image.src = this.canvasWrapText({canvas:<HTMLElement>document.querySelector("#canvas" + serviceName),text: serviceName}); }
2、画布=>图片
/** * 绘制文字到canvas，判断换行位置，和设置canvas高度 * @param options canvas画布对象 */ canvasWrapText(options) { let settings = { canvas:document.getElementsByTagName("canvas")[0], //canvas对象，必填，不填写默认找到页面中的第一个canvas canvasWidth:240, //canvas的宽度 drawStartX:50, //绘制字符串起始x坐标 drawStartY:30, //绘制字符串起始y坐标 lineHeight:30, //文字的行高 font:"24px 'Microsoft Yahei'", //文字样式 text:"请修改掉默认的配置", //需要绘制的文本 drawWidth:220, //文字显示的宽度 color:"#000000", //文字的颜色 textAlain: "center", backgroundColor:"#ffffff", //背景颜色 }; //将传入的配置覆盖掉默认配置 if(!!options && typeof options === "object"){ for(let i in options){ settings[i] = options[i]; } } //获取2d的上线文开始设置相关属性 let canvas = settings.canvas; canvas.width = settings.canvasWidth; let ctx = canvas.getContext("2d"); //绘制背景色 ctx.fillStyle = settings.backgroundColor; ctx.fillRect(0,0,canvas.width,canvas.height); //绘制文字 ctx.font = settings.font; ctx.fillStyle = settings.color; // @ts-ignore ctx.textAlign = settings.textAlain; let lineWidth = 0; //当前行的绘制的宽度 let lastTextIndex = 0; //已经绘制上canvas最后的一个字符的下标 //由于改变canvas 的高度会导致绘制的纹理被清空，所以，不预先绘制，先放入到一个数组当中 let arr = []; for(let i = 0; i< settings.text.length; i++){ //获取当前的截取的字符串的宽度 lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width; if(lineWidth > settings.drawWidth){ //判断最后一位是否是标点符号 if(judgePunctuationMarks(settings.text[i-1])){ arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex)); lastTextIndex = i; }else{ arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-1)); lastTextIndex = i-1; } } //将最后多余的一部分添加到数组 if(i === settings.text.length - 1){ arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+1)); } } //根据arr的长度设置canvas的高度 canvas.height = arr.length*settings.lineHeight+settings.drawStartY; ctx.font = settings.font; ctx.fillStyle = settings.color; for(let i =0; i<arr.length; i++){ ctx.fillText(arr[i],settings.drawStartX,settings.drawStartY+i*settings.lineHeight); } //判断是否是需要避开的标签符号 function judgePunctuationMarks(value) { let arr = [".",",",";","?","!",":",""","，","。","？","！","；","：","、"]; for(let i = 0; i< arr.length; i++){ if(value === arr[i]){ return true; } } return false; } return canvas.toDataURL(); }
注：关于代码实现中的关键节点都有详细的注解，此处不再累赘。
3、html：
<div class="member-image"> <!--为了将文字渲染为图片所设置的样例canvas--> <canvas id="canvas{{card.name}}" width="" height="" style="background-color:#ffffff;display: none;"></canvas> <img id="nameImage{{card.name}}" alt="Member"> </div>
注：html代码中有遍历，不可直接使用