公司医院项目，需要定制化显示病人的体温、脉搏、呼吸。由于界面是定义好的，无法使用开源项目来改，干脆自己画一个了。
为什么是ZRender
ZRender 是百度前端团队用于绘制 EChar t的开源库，里面封装了各种对Canvas的使用。而且 ZRender 的文档是全中文的，对开发者也非常友好
需求
相对于其他知识点，绘图没什么特别要讲的。无非是不停的画而已。步骤复杂但是实现起来没有什么技术难点。所以直接写下需求，然后贴上代码供大家参考啦~
绘制表格 —— 计算好格子的宽、高、数量，for循环绘制多条横线、竖线即可实现。根据体温、脉搏等数据标注相应位置的点，点有各种形状。 —— 形状ZRender 已经提供，直接调用配置即可。
实心圆空心圆实心三角形虚线特殊符号 —— 其实都不难，慢慢画都能画出来。纵向绘制文本 —— 没有发现纵向绘制的方式，于是将文本拆分一个一个字画上去。鼠标hover在各个点上需要有文本框显示具体内容。 —— 绘制一个文本，隐藏起来。当触发hover事件的时候显示文本，并将文本移动到相应位置。线段连接 —— 计算一下两个点的x，y连接即可。虚线只需要配置style: { lineDash: [ 5, 5 ] }即可实现虚线效果。将 ZRender 绘制的表格打印出来 —— 转为图片打印，最后会讲。
贴个效果图：
实现
由于是公司项目，不发布源码啦~以下是demo代码。
table.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Table</title><script src="zrender.js"></script><style>#main {height: 600px;width: 800px;}</style></head><body><div id="main"></div><img src="" id="main_img"><script src="DrawUtil.js"></script><script>var zr = zrender.init(document.getElementById('main'))const [height, width] = [15, 15]var tableGroup = new zrender.Group()for (let i = 0; i <= 30; i++) {var line1 = new zrender.Line({shape: {x1: 0,y1: height * i,x2: width * 30,y2: height * i,}})var line2 = new zrender.Line({shape: {x1: width * i,y1: 0,x2: width * i,y2: height * 30,}})tableGroup.add(line1)tableGroup.add(line2)}tableGroup.attr('position', [10, 10])zr.add(tableGroup)DrawUtil.initHoverText(zr)zr.add(DrawUtil.drawText('你好，在干嘛呐？', 30, 30))zr.add(DrawUtil.drawCircle({x: 50, y: 50, txt: '哈哈'}, '#FAD'))zr.add(DrawUtil.drawHollowCircle({x: 100, y: 100, txt: '空心圆'}, '#DAF'))zr.add(DrawUtil.drawIsogon({x: 200, y: 200, txt: 'jack'}, '#ADF'))setTimeout(toImg, 1000)function toImg() {console.log('to img')var canvas = document.querySelector('#main canvas')if (canvas) {var img = canvas.toDataURL("image/png")document.querySelector('#main_img').src = img}}</script></body></html>
DrawUtil.js
// hover 框文本样式var Textvar DrawUtil = {// 初始化悬浮文本initHoverText(zr){Text = new zrender.Text({style: {fontSize: 14,textBackgroundColor: '#FFF',textBorderColor: '#000',textBorderWidth: 1,textBorderRadius: 2,textPadding: 5,},zlevel: 100})zr.add(Text)Text.hide()},// 绘制纵向文本drawText (str, dx, dy) {let group = new zrender.Group()for (var i = 0; i < str.length; i++) {var text = new zrender.Text({style: {text: str.charAt(i),fontSize: 14,textFill: '#FF4949',textBackgroundColor: '#FFF',}})let y = 14 * itext.attr('position', [0, y])group.add(text)}group.attr('position', [dx, dy])return group},// 绘制实心圆drawCircle (Obj, Color) {return new zrender.Circle({shape: {cx: Obj.x,cy: Obj.y,r: 4},style: {fill: Color}}).on('mouseover', function () {Text.show()Text.attr('position', [Obj.x, Obj.y])Text.attr({style: {text: Obj.txt}})}).on('mouseout', function () {Text.hide()})},// 绘制三角形drawIsogon (Obj, Color) {return new zrender.Isogon({shape: {x: Obj.x,y: Obj.y,r: 6,n: 3},style: {fill: Color}}).on('mouseover', function () {Text.show()Text.attr('position', [Obj.x, Obj.y])Text.attr({style: {text: Obj.txt}})}).on('mouseout', function () {Text.hide()})},// 绘制空心圆drawHollowCircle (Obj, Color) {return new zrender.Circle({shape: {cx: Obj.x,cy: Obj.y,r: 4},style: {fill: '#FFFFFF',stroke: Color}}).on('mouseover', function () {Text.show()Text.attr('position', [Obj.x, Obj.y])Text.attr({style: {text: Obj.txt}})}).on('mouseout', function () {Text.hide()})},// 绘制×drawX (Obj, Color) {return new zrender.Text({style: {text: '×',fontSize: 20,textFill: Color,},position: [Obj.x - 7, Obj.y - 11]}).on('mouseover', function () {Text.show()Text.attr('position', [Obj.x, Obj.y])Text.attr({style: {text: Obj.txt}})}).on('mouseout', function () {Text.hide()})},// 绘制圆圈中有点的圆drawPointCircle (Obj, Color) {var group = new zrender.Group()var Point = new zrender.Circle({shape: {cx: 4,cy: 4,r: 1},style: {fill: Color}})var OutCircle = new zrender.Circle({shape: {cx: 4,cy: 4,r: 4},style: {fill: '#FFFFFF',stroke: Color}})group.on('mouseover', function () {Text.show()Text.attr('position', [Obj.x, Obj.y])Text.attr({style: {text: Obj.txt}})}).on('mouseout', function () {Text.hide()})group.add(OutCircle)group.add(Point)group.attr('position', [Obj.x - 3, Obj.y - 3])return group},// 绘制圆圈中有H的圆drawHCircle (Obj, Color) {var group = new zrender.Group()var h = new zrender.Text({style: {text: 'H',fontSize: 8,textFill: Color},position: [2, -1]})var OutCircle = new zrender.Circle({shape: {cx: 5,cy: 5,r: 5},style: {fill: '#FFFFFF',stroke: Color}})group.on('mouseover', function () {Text.show()Text.attr('position', [Obj.x, Obj.y])Text.attr({style: {text: Obj.txt}})}).on('mouseout', function () {Text.hide()})group.add(OutCircle)group.add(h)group.attr('position', [Obj.x - 4, Obj.y - 4])return group},// 绘制圆圈中有加号的圆drawAddCircle (Obj, Color) {var group = new zrender.Group()var h = new zrender.Text({style: {text: '+',fontSize: 8,textFill: Color},position: [2, -1]})var OutCircle = new zrender.Circle({shape: {cx: 5,cy: 5,r: 5},style: {fill: '#FFFFFF',stroke: Color}})group.on('mouseover', function () {Text.show()Text.attr('position', [Obj.x, Obj.y])Text.attr({style: {text: Obj.txt}})}).on('mouseout', function () {Text.hide()})group.add(OutCircle)group.add(h)group.attr('position', [Obj.x - 4, Obj.y - 4])return group},}
最后，需要将Canvas打印出来。我的解决方案是将Canvas转为图片。之后将图片放到你想放的地方即可。
setTimeout(toImg, 1000)function toImg() {var canvas = document.querySelector('#main canvas')if (canvas) {var img = canvas.toDataURL("image/png")document.querySelector('#main_img').src = img}}
