Javascript-连接两行

下图：

我想把上面的框和下面的框连接起来，让我们把上面框的底边称为A，下面框的顶边称为B

现在，我有两个数组，包含线A和线B中的点

A=[{Ax1，Ay1}，{Ax2，Ay2}，…]和B=[{Bx1，By1}，{Bx2，By2}，…]

在现实世界中，它可以像A=[{100100}，{120100}，{140100}，{160100}]和B=[{120200}，{140200}，{160200}，{180200}，{200200}，]

请看上图中的黑点

如何获得如图所示的连接点？连接点必须尽可能靠近线路中心

这是我想要得到的，但下面的函数从两条线的左边开始在两个匹配点之间画一条线，有什么建议吗

drawConnection : function(componentOut, componentIn, connectionKey) {
        var outDim     = $(componentOut).data('dim');
        var inDim      = $(componentIn).data('dim');
        var outPorts   = $(componentOut).data('ports');
        var inPorts    = $(componentIn).data('ports');
        var abovePorts = {}; 
        var belowPorts = {}; 
        var i = 0; 
        if(outDim.bottomLeft.y < inDim.topLeft.y){
            // Now proceed only if they can be connect with a single line
            if(outDim.bottomLeft.x < inDim.topRight.x && outDim.bottomRight.x>inDim.topLeft.x) {
                // Now get a proper connecting point
                abovePorts = outPorts.bottom; 
                belowPorts = inPorts.top;
                for(i=0; i<abovePorts.length; i++) {
                    for(j=0; j<belowPorts.length; j++) {
                        if(!abovePorts[i].inUse && !belowPorts[j].inUse && (abovePorts[i].x == belowPorts[j].x)){
                            console.debug("Drawing vertical lines between points ("+abovePorts[i].x+","+abovePorts[i].y+") and ("+abovePorts[i].x+","+belowPorts[j].y+")");
                            return true;
                        }
                    }
                }
            }
        }
        return false;
    },

drawConnection:function（componentOut、componentIn、connectionKey）{
var outDim=$（componentOut）.data（'dim'）；
var inDim=$（componentIn）.data（'dim'）；
变量输出=$（componentOut）.data（'端口'）；
var inport=$（componentIn）.data（'port'）；
var-upperports={}；
var belowport={}；
var i=0；
if（outDim.bottomLeft.yinDim.toplight.x）{
//现在找到一个合适的连接点
以上端口=输出端口。底部；
belowport=inport.top；
对于（i=0；i），但连接应采用如下所示的直线

您是否尝试过Raphael.js:？
另一种方法是使用浏览器的HTML+CSS引擎，而不是使用js

您可以使用表格。

每个盒子一个单元格行，连接器两个单元格行。

为连接器的一个边框上色，并使用
边距
、
浮动
和
宽度
样式来定位框

很久以前，我就已经使用这种技术来绘制组织结构图了……当IE6被认为是最好的浏览器时！
另一个值得一看的是，如果你想更强大一点。我以前使用过Raphael.js，这非常容易拾取和使用。请注意，两者都使用了Canvas元素，据我所知，它根本不受支持浏览器。
考虑过使用canvas/vml吗？不，我也需要在IE7中支持我的应用程序！SVG呢？IE不支持它吗？从来没有听说过这一款，而且它非常棒。我的盒子也必须支持DnD！你可以在拖动时使原始文件不可见，并重新绘制新的情况。但是如果没有上下文，很难想象会出现这种情况我们的需求。祝你好运！-）不同之处在于，从文档中可以看出，Raphael使用SVG，IE6也支持它！Processing.js在Firefox、Safari、Opera和Chrome中运行，但在Mircosoft赶上第15期之前，Internet Explorer将不支持它。