Drawing lines between 2 elements onclick

Question

is there a way (i guess its always) to draw a line between 2 elements? A div and an img tags wwith different ids. Heres is some html

<div id="textHolder">
                      <div class="text" id="text0"><p>masă</p></div>
</div>
<div id="objectHolder">
                          <img class="obiecte" id="obj0" src="images/Macara.svg">
</div> 

Ok,so i need to draw a line between the div inside of another div with id="textHolder" and an image inside a div with id="objectHolder".First clicking on the div inside of textHolder then drawing the line between them when user click on the image inside of objectHolder.

I know i must add some code but i didnt found anything good to show.

Here's a fiddle: http://jsfiddle.net/4DURB/

Answer 1

Your best bet would be to use the HTML <canvas> element. I'm no expert at using canvas elements, but yours would probably look something like this:

<script>
    var can = document.getElementById("canvasName");
    var candraw = c.getContext("2d")
    candraw.moveTo(position of textHolder);
    candraw.lineTo(position of objectHolder);
    candraw.stroke();
</script>

I hope this helps.

Answer 2

I've done a little bit of work on this one, because it piqued my interest. There is a jsbin (preferred to jsfiddle just because of the console) here http://jsbin.com/guken/3/

The method is to create a floating canvas element (shaded pink), and lay that underneath the rest of the DOM (using z-index). I then calculate the points on the borders of the two boxes that correspond with a line between the box centres. The red and blue squares are actually divs that move with the line ends, which could be used for annotation like source, target etc.

In that jsbin, you can click on one element, and then get a line ready to click on the next. It detects hover for the chosen elements and snaps to a target if you hover over one.

I won't paste all the code here, but the bit where we draw a line from one x,y position to another in client DOM coordinates is this:

var lineElem;
function drawLineXY(fromXY, toXY) {
    if(!lineElem) {
        lineElem = document.createElement('canvas');
        lineElem.style.position = "absolute";
        lineElem.style.zIndex = -100;
        document.body.appendChild(lineElem);
    }
    var leftpoint, rightpoint;
    if(fromXY.x < toXY.x) {
      leftpoint = fromXY;
      rightpoint = toXY;
    } else {
      leftpoint = toXY;
      rightpoint = fromXY;
    }

    var lineWidthPix = 4;
    var gutterPix = 10;
    var origin = {x:leftpoint.x-gutterPix, 
                  y:Math.min(fromXY.y, toXY.y)-gutterPix};
    lineElem.width = Math.max(rightpoint.x - leftpoint.x, lineWidthPix) + 
      2.0*gutterPix;
    lineElem.height = Math.abs(fromXY.y - toXY.y) + 2.0*gutterPix;
    lineElem.style.left = origin.x;
    lineElem.style.top = origin.y;
    var ctx = lineElem.getContext('2d');
    // Use the identity matrix while clearing the canvas
    ctx.save();
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, lineElem.width, lineElem.height);
    ctx.restore();
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#09f';
    ctx.beginPath();
    ctx.moveTo(fromXY.x - origin.x, fromXY.y - origin.y);
    ctx.lineTo(toXY.x - origin.x, toXY.y - origin.y);
    ctx.stroke();
}

As the example is just one line, and we can always store lines that have been 'finished' ready to create more, it uses a global variable lineElem. On the first attempt to draw a line, it creates a canvas element, inserts it into the DOM and assigns it to lineElem. After this construction, it subsequently reuses the canvas element, changing the size and redrawing for new coordinate pairs.

To prevent the line being cut off by the edge of the canvas, there is a gutter setting which pads the canvas width and height. The rest is just getting the coordinate translation right between client DOM coordinates and the coordinates for drawing on the canvas itself.

The only other unstraightforward bit is calculating the coordinates of a point on the border of a box along a line. It's not perfect, but it's a reasonable start. The crux is to calculate the angle of the target (to) point from the perspective of the source (from) point, and see how that compares to the known angles of the box corners:

function getNearestPointOutside(from, to, boxSize) {
    // which side does it hit? 
    // get the angle of to from from.
    var theta = Math.atan2(boxSize.y, boxSize.x);
    var phi = Math.atan2(to.y - from.y, to.x - from.x);
    var nearestPoint = {};
    if(Math.abs(phi) < theta) { // crosses +x
        nearestPoint.x = from.x + boxSize.x/2.0;
        nearestPoint.y = from.y + ((to.x === from.x) ? from.y : 
        ((to.y - from.y)/(to.x - from.x) * boxSize.x/2.0));
    } else if(Math.PI-Math.abs(phi) < theta) { // crosses -x
        nearestPoint.x = from.x - boxSize.x/2.0;
        nearestPoint.y = from.y + ((to.x === from.x) ? from.y : 
        (-(to.y - from.y)/(to.x - from.x) * boxSize.x/2.0));
    } else if(to.y > from.y) { // crosses +y
        nearestPoint.y = from.y + boxSize.y/2.0;
        nearestPoint.x = from.x + ((to.y === from.y) ? 0 : 
        ((to.x - from.x)/(to.y - from.y) * boxSize.y/2.0));
    } else { // crosses -y
        nearestPoint.y = from.y - boxSize.y/2.0;
        nearestPoint.x = from.x - ((to.y === from.y) ? 0 :
        ((to.x - from.x)/(to.y - from.y) * boxSize.y/2.0));
    }
    return nearestPoint;
}

Theta is the angle to the first box corner, and phi is the actual line angle.

To get the positions of the boxes in client coordinates, you need to use elem.getBoundingClientRect(), which yields left, top, width, height among other things, and I use to find the centre of a box:

function getCentreOfElement(el) {
    var bounds = el.getBoundingClientRect();
    return {x:bounds.left + bounds.width/2.0,
            y:bounds.top + bounds.height/2.0};
}

Putting all that together, you can draw a line from one element to another.