Question

在下图中：

alt text http://rookery9.aviary.com.s3.amazonaws.com/4478500/4478952_3e06_625x625.jpg

我想将上面的方框连接到下面，让我们将顶部框的下边缘称为A，将下方框的上边缘称为B

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

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

在现实世界中，它可以像A = [{100,100}，{120,100}，{140,100}，{160,100}]和B = [{120,200}，{140， 200}，{160,200}，{180,200}，{200,200}，]

请查看上图中的黑点

如何获取图片中显示的连接点？连接点必须尽可能靠近线的中心。

这是我想要得到的，但是下面的函数在两条线的左边开始的两个匹配点之间绘制线，任何suggessions

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;
    },

- 更新

我正在尝试获得与此http://raphaeljs.com/graffle.html类似的内容，但连接应使用直线进行，如下所示

alt text http://rookery9.aviary.com.s3.amazonaws.com/4480500/4480527_1e77_625x625.jpg

Answer 1

你试过Raphael.js：http://raphaeljs.com/吗？

Answer 2

另一种方法是使用浏览器的HTML + CSS引擎，而不是使用JS。

您可以使用表格每个盒子有一个单元格行，连接器有2个单元格行您为连接器的其中一个边框着色，并使用margin，float和width样式来定位框。

我很久以前就已经用这种技术来绘制组织图...当IE6被认为是最好的浏览器时！

Answer 3

如果你想要更多的力量，另一个值得关注的是Processing.js。我之前使用过Raphael.js，这很容易拾取和使用。请注意，两者都使用了Canvas元素，据我所知，在所有浏览器中都不支持。

Javascript - 连接两行

3 个答案: