公司醫(yī)院項(xiàng)目履澳，需要定制化顯示病人的體溫、脈搏怀跛、呼吸距贷。由于界面是定義好的，無(wú)法使用開(kāi)源項(xiàng)目來(lái)改吻谋，干脆自己畫(huà)一個(gè)了忠蝗。
為什么是ZRender
ZRender 是百度前端團(tuán)隊(duì)用于繪制 EChar t的開(kāi)源庫(kù)，里面封裝了各種對(duì) Canvas 的使用漓拾。而且 ZRender 的文檔是全中文的阁最，對(duì)開(kāi)發(fā)者也非常友好
需求
相對(duì)于其他知識(shí)點(diǎn)戒祠，繪圖沒(méi)什么特別要講的。無(wú)非是不停的畫(huà)而已速种。步驟復(fù)雜但是實(shí)現(xiàn)起來(lái)沒(méi)有什么技術(shù)難點(diǎn)姜盈。所以直接寫(xiě)下需求，然后貼上代碼供大家參考啦~
- 繪制表格 —— 計(jì)算好格子的寬配阵、高馏颂、數(shù)量，
for循環(huán)繪制多條橫線棋傍、豎線即可實(shí)現(xiàn)救拉。 - 根據(jù)體溫、脈搏等數(shù)據(jù)標(biāo)注相應(yīng)位置的點(diǎn)瘫拣，點(diǎn)有各種形狀亿絮。 —— 形狀ZRender 已經(jīng)提供，直接調(diào)用配置即可麸拄。
- 實(shí)心圓
- 空心圓
- 實(shí)心三角形
- 虛線
- 特殊符號(hào) —— 其實(shí)都不難派昧，慢慢畫(huà)都能畫(huà)出來(lái)。
- 縱向繪制文本 —— 沒(méi)有發(fā)現(xiàn)縱向繪制的方式拢切，于是將文本拆分一個(gè)一個(gè)字畫(huà)上去蒂萎。
- 鼠標(biāo)
hover在各個(gè)點(diǎn)上需要有文本框顯示具體內(nèi)容。 —— 繪制一個(gè)文本失球，隱藏起來(lái)岖是。當(dāng)觸發(fā)hover事件的時(shí)候顯示文本，并將文本移動(dòng)到相應(yīng)位置实苞。 - 線段連接 —— 計(jì)算一下兩個(gè)點(diǎn)的x豺撑，y連接即可。虛線只需要配置
style: { lineDash: [ 5, 5 ] }即可實(shí)現(xiàn)虛線效果黔牵。 - 將 ZRender 繪制的表格打印出來(lái) —— 轉(zhuǎn)為圖片打印聪轿，最后會(huì)講。
貼個(gè)效果圖：
效果圖
實(shí)現(xiàn)
由于是公司項(xiàng)目猾浦，不發(fā)布源碼啦~以下是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 Text
var 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 * i
text.attr('position', [0, y])
group.add(text)
}
group.attr('position', [dx, dy])
return group
},
// 繪制實(shí)心圓
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()
})
},
// 繪制圓圈中有點(diǎn)的圓
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
},
// 繪制圓圈中有加號(hào)的圓
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打印出來(lái)。我的解決方案是將Canvas轉(zhuǎn)為圖片夹抗。之后將圖片放到你想放的地方即可绳慎。
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
}
}
