Html让两个Dom进行连线 , 可以自定义连接的位置

javascript 复制代码
        function getXy(dom, pos) {
            var obj = {x : 0, y : 0};
            if(pos == 'button') {
                obj.x = dom.offsetLeft + dom.offsetWidth / 2;
                obj.y = dom.offsetTop + dom.offsetHeight;
            }else if(pos == 'left') {
                obj.x = dom.offsetLeft;
                obj.y = dom.offsetTop + dom.offsetHeight / 2;
            }else if(pos == 'right') {
                obj.x = dom.offsetLeft + dom.offsetWidth;
                obj.y = dom.offsetTop + dom.offsetHeight / 2;
            }else if(pos == 'top') {
                obj.x = dom.offsetLeft + dom.offsetWidth / 2;
                obj.y = dom.offsetTop;
            }
            return obj;
        }

        function connectEdges(id1, id2, color = 'red', width = '0.5' , pos1 = 'right', pos2 = 'left') {
            const dom1 = document.getElementById(id1);
            const dom2 = document.getElementById(id2);
            const svg = document.getElementById('svg-container');
            var objXy1 = getXy(dom1, pos1);
            var objXy2 = getXy(dom2, pos2);
            // 创建SVG线条
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', objXy1.x);
            line.setAttribute('y1', objXy1.y);
            line.setAttribute('x2', objXy2.x);
            line.setAttribute('y2', objXy2.y);
            line.setAttribute('stroke', color); // 线条颜色
            line.setAttribute('stroke-width', width); // 线条宽度
            // 将线条添加到SVG容器中
            svg.appendChild(line);
        }

                // 这是我自己的业务代码
                for(var i = 0 ; i  < data.length ; i++) {
                    var obj = data[i];
                    if(obj.source != obj.target){
                        if(obj.target.indexOf('配偶') != -1) {
                            connectEdges(obj.source, obj.target, 'red', 2, 'right', 'left');
                        }else{
                            connectEdges(obj.source, obj.target, 'blue', 0.5, 'button', 'top');
                        }
                    }
                }
相关推荐
herogus丶7 分钟前
【Chrome】‘Good助手‘ 扩展程序使用介绍
前端·chrome
独立开阀者_FwtCoder11 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者13 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder14 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder14 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806929 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js