leader-line划线,z-index较高的问题?调用position()后,失去圆角的问题?-灵析社区

页面采用flex上下布局, 上面高度固定,下面通过 flex: 1; 自动撑开, 然后 overflow-y: auto; 超出显示滚动条; 需要通过 leader-line 划线的内容主要在下面部分, 所以滚动后需要通过 `position()` 来更新线条位置,现在遇到如下问题: 1. 滚动到最下面,划线会覆盖在上面的内容; 2. 滚动页面后,折线`grid`的圆角就失效了,该如何处理呢? 问题一:  问题二:  demo 地址: 链接打不开,直接复制如下内容,保持为 html 文件即可: Document html, body{ height: 100%; overflow: hidden; margin: 0; border: 0; padding: 0; } .wrapper{ height: 100%; overflow-y: hidden; display: flex; flex-direction: column; } .top{ height: 200px; background: #e3e3e3; } .content{ height: 0; flex: 1; overflow-y: auto; padding: 0 50px; } .node-warpper{ background: rgba(255, 0, 0, 0.172); margin: 20px; } .node{ border: 1px solid blue; height: 30px; line-height: 30px; margin: 10px; } top 区域 node-1 node-2 node-3 node-4 let node1 = document.getElementById('node-1') let node2 = document.getElementById('node-2') let node3 = document.getElementById('node-3') let node4 = document.getElementById('node-4') let line1 = new LeaderLine({ start: node1, end: node2, path: 'grid', startSocket: 'right', endSocket: 'right', color: 'blue', size: 5 }) let line2 = new LeaderLine({ start: node2, end: node3, path: 'grid', startSocket: 'left', endSocket: 'left', color: 'blue', size: 5 }) let line3 = new LeaderLine({ start: node3, end: node4, path: 'grid', startSocket: 'right', endSocket: 'right', color: 'blue', size: 5 }) let showEffectName = 'draw' // 动画参数 let animOptions = { duration: 1000, //持续时长 timing: 'ease-in' // 动画函数 } line1.show(showEffectName, animOptions) line2.show(showEffectName, animOptions) line3.show(showEffectName, animOptions) let scrollView = document.getElementById('content') scrollView.addEventListener('scroll',function(){ //滚动div,更新线条位置 line1.position() line2.position() line3.position() //将折线替换成圆角 let elmsPath1 = document.getElementById(`leader-line-${idx + 1}-line-path`); elmsPath1.setAttribute('d', addArc(elmsPath1.getAttribute('d'), 10)); let elmsPath2 = document.getElementById(`leader-line-${idx + 1}-line-path`); elmsPath2.setAttribute('d', addArc(elmsPath2.getAttribute('d'), 10)); let elmsPath3 = document.getElementById(`leader-line-${idx + 1}-line-path`); elmsPath3.setAttribute('d', addArc(elmsPath3.getAttribute('d'), 10)); }, false); //将折线替换成圆角 var elmsPath = document.getElementById('leader-line-1-line-path'); elmsPath.setAttribute('d', addArc(elmsPath.getAttribute('d'), 10)); var elmsPath2 = document.getElementById('leader-line-2-line-path'); elmsPath2.setAttribute('d', addArc(elmsPath2.getAttribute('d'), 10)); var elmsPath3 = document.getElementById('leader-line-3-line-path'); elmsPath3.setAttribute('d', addArc(elmsPath3.getAttribute('d'), 10)); //替换成圆角方法 function addArc(pathData, radius) { var reL = /^L ?([\d.\-+]+) ([\d.\-+]+) ?/, newPathData, curXY, curDir, newXY, newDir, sweepFlag, arcXY, arcStartXY; function getDir(xy1, xy2) { if (xy1.x === xy2.x) { return xy1.y