JavaScript-连接两条直线

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}]

请查看上面图片中的黑点。

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

这是我想要的结果，但下面的函数会从两条线的左侧开始绘制两个匹配点之间的线。有什么建议吗？

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

- Mithun Sreedharan

---

考虑使用canvas/vml了吗？ - danp

不，我也需要支持我的应用在IE7中！ - Mithun Sreedharan

SVG在IE中不支持，这个怎么办？ - Ayyash

Answer 1

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

- Roki

---

从未听说过这个，但它很棒。 - Peter Perháč

Answer 2

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

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

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

- Mic

---

我的框架也必须支持拖放！ - Mithun Sreedharan

你可以在拖动时将原始内容设为不可见，并重新绘制新的情况。但是如果没有上下文，很难想象你的需求。祝好运！-) - Mic

Answer 3

另一个值得一看的是Processing.js，如果你想要更强大一些的功能。我之前用过Raphael.js，那个相当容易上手和使用。只需注意两者都使用了Canvas元素，据我所知，这在所有浏览器中并不都得到支持。

- Jason Brant

---

区别在于，根据文档，Raphael使用SVG并且也支持IE6！Processing.js在Firefox、Safari、Opera和Chrome中运行，但在Internet Explorer上不受支持，直到微软解决ISSUE 15。 - Mithun Sreedharan