js绘制机房拓扑可视化配置，端口，IP地址，设备在线状态，多种连线方式

jstopo

已于 2024-04-19 16:09:22 修改

阅读量342

点赞数 2

文章标签：前端 javascript html

于 2024-03-01 10:07:27 首次发布

本文链接：https://blog.csdn.net/huo611/article/details/136388256

版权

本文介绍了如何使用JavaScript在canvas上实现机房拓扑的可视化配置，包括端口、IP地址的展示，设备在线状态的表示，以及多种连线方式的动态演示。函数如`drawCanvas`和`dotMove`负责图形绘制和动画效果。

摘要由CSDN通过智能技术生成

机房拓扑配置
机房拓扑可视化配置，端口，IP地址，设备在线状态，多种连线方式
演示网址

drawCanvas(str){//绘制topo
   const dom = this.$refs[str];
    const w = dom.width = dom.clientWidth,
    h = dom.height = dom.clientHeight;
    const ctx = dom.getContext("2d");
    this.canvasObj = {ctx,w,h,};
    this.createCanvasText(ctx);
},
dotMove() {//动画事件
    this.timeR ? cancelAnimationFrame(this.timeR) : null;
    this.timeR = null;
    let lineMove = () => {
        this.createCanvasText(this.canvasObj.ctx);
        this.count++;
        if(this.count > 18){
            this.count = 0;
        }
        this.isSwitch ? this.timeR = requestAnimationFrame(lineMove) : null;
     }
     lineMove();
},

drawTopo(ctx,w,h){
            ctx.clearRect(0,0,w,h);
            ctx.lineWidth = 2;
            const modelArr = this.dataArr;
            const lineData = [],dist = 45;
            modelArr.forEach(model=>{
                if(model.isHide){
                    
                }else{
                    this.drawRectFunc(ctx,model);
                }
                if(model.children){
                    model.children.forEach(box=>{
                        if(box.isImg){//画图标
                            this.drawImgFunc(ctx, box);
                        }else{
                            this.drawRectFunc(ctx, box);    
                        }
                        if(model.isLine){
                            this.drawLineFunc(ctx, box, dist);
                            if(box.isStart||box.isEnd){
                                lineData.push(box);
                            } 
                        }
                                               
                    })
                    if(lineData.length > 0){
                        const centerObj = {
                            x: (lineData[1].x+lineData[1].w/2 - (lineData[0].x+lineData[0].w/2))/2+lineData[0].x+lineData[0].w/2,
                            y: lineData[0].y-dist
                        }
                        //漏水排在0 连接 烟雾传感器排在5
                        ctx.beginPath();
                        ctx.strokeStyle = lineData[0].lineColor;
                        ctx.moveTo(lineData[0].x+lineData[0].w/2, lineData[0].y-dist);
                        ctx.lineTo(centerObj.x, centerObj.y);
                        ctx.moveTo(lineData[1].x+lineData[1].w/2, lineData[1].y-dist);
                        ctx.lineTo(centerObj.x, centerObj.y);
                        ctx.stroke();
                        // ctx.fillText("▲", lineData[0].x+lineData[0].w/2, lineData[0].y-dist+5);
                        // ctx.fillText("▲", lineData[1].x+lineData[1].w/2, lineData[1].y-dist+5);
                    }
                }
                
                if(model.isImg){//画图标
                    this.drawImgFunc(ctx, model);
                }
                
            })
        },