使用ZRender绘制表格

最新推荐文章于 2024-08-08 08:35:47 发布

violet-jack

最新推荐文章于 2024-08-08 08:35:47 发布

阅读量5.6k

点赞数

分类专栏：前端开发文章标签： ZRender Canvas

本文链接：https://blog.csdn.net/violetjack0808/article/details/79088223

版权

前端开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

公司医院项目，需要定制化显示病人的体温、脉搏、呼吸。由于界面是定义好的，无法使用开源项目来改，干脆自己画一个了。

为什么是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 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
    },
    // 绘制实心圆
    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
        }
    }