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');
                        }
                    }
                }
相关推荐
蓝婷儿2 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再4 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5558 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录13 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000014 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl15 分钟前
深度剖析Kafka读写机制
前端
FogLetter15 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan16 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan17 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan18 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端