前端开发基于Qunee绘制网络拓扑图总结-01

大家好，欢迎来到IT知识分享网。

节点、连线添加label标签：

当需要在节点或者连线上添加图标、文字等醒目标识时，可添加label标签

自定义事件控制label标签的显示、隐藏：

外部点击事件控制某些自定义标识显、隐

showHideLableUI(edge, visible) { 
    let uis = edge.bindingUIs; let edgeBundle = edge.getEdgeBundle(); uis.forEach(function(ui) { 
    // 当有多个不同类型的标识时 // 给labelUI添加自定义属性 // 根据不同属性显示、隐藏当前查询到的lableUI if (ui.ui.myMark == "size") { 
    ui.ui.visible = visible; } }) edge.invalidate(); } 

自定义事件控制连线折叠、展开：

以下方法针对当前图形连线需要全部展开、折叠的场景。如果需要指定某几条线折叠、展开，可结合现有方法灵活改动

// 展开连线 function expandLines() { 
    let that = this,graph = this.graph; graph.forEach(function(element) { 
    if (element instanceof Q.Edge) { 
    let edgeBundle = element.getEdgeBundle(); edgeBundle.expanded = true; } }) this.graph.invalidate(); } // 折叠连线 function hideLines() { 
    let that = this,graph = this.graph; graph.forEach(function(element) { 
    if (element instanceof Q.Edge) { 
    let edgeBundle = element.getEdgeBundle(); edgeBundle.expanded = false; } }) this.graph.invalidate(); } 

图形初始化常见配置项

初始化配置项

this.graph = new Q.Graph(this.$refs.canvas); // 是否显示提示文本  this.graph.enableTooltip = false; //（false：不显示；true：显示） this.graph.tooltipDelay = 0; this.graph.tooltipDuration = 10000; // 禁止鼠标滚动缩放 this.graph.enableWheelZoom = false;//（false：禁止缩放；true：不限制） // 禁止画布出现滚动条 this.graph.navigationType = Q.Consts.NAVIGATION_NONE; // 模式-查看 禁止节点拖动 this.graph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW; 

寄语

今天恰逢2023年冬至～

祝：素未谋面的朋友们节日快乐！！！

岁末将至、敬颂冬绥！！！