Javascript - connect two lines

Question

In the following figure:

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

I want to link the boxes in the above example below. Let's name the bottom edge of the top boxes as A and the top edge of the following fields as B

Now I have two arrays containing points in row A and B saying

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

In the real world, it can be like A = [{100, 100}, {120, 100}, {140, 100}, {160, 100}] and B = [{120, 200}, {140, 200}, {160, 200}, {180, 200}, {200, 200},]

Look at the black dots in the picture above.

How can I get connection points as shown in the figures? The connection point should be as close to the center of the line as possible.

This is what I am trying to get, but below the functions draw a line between two correspondence points from the beginning to the left of both lines. Any suggestions

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

- Update

I'm definitely trying to get something similar to this http://raphaeljs.com/graffle.html , but the connections should be made with straight lines, as shown below

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

Answer 1

Have you tried Raphael.js: http://raphaeljs.com/ ?

Answer 2

Another approach is to use the HTML + CSS mechanism of the browser instead of using JS.

You can use the table.
One row of cells for each window and 2 rows of cells for the connector.
You mark one of the borders of the connector and use the margin , float and width styles to place these fields.

I already used this technique to draw org charts for a long time ... when IE6 was considered the best browser!

Answer 3

Another value is Processing.js if you want a little more energy. I used to use Raphael.js, and it was pretty easy to pick up and use. Just keep in mind that both use the Canvas element, which, as far as I know, is not yet supported in all browsers.