How to draw a diagonal line with GWT or HTML+CSS+JavaScript?

I am working on a web application where I need to connect stuff with lines. It would be nice if the lines would not be restricted to horizontal/vertical. I also need to detect clicks on the lines. The alternatives I considered so far:

Use the CSS rotate

I create a div or hr with the proper length then I use the CSS transform attribute in their style. There is an answer about it somewhere on this site.

Advantages:

• Simple.
• Can detect clicks.

Disadvantages:

• Requires browser specific CSS.

Creating the image on the server

I create a webpage which takes fromx, fromy, tox, toy as GET or POST parameters and gives back the image of the line.

Advantages:

• Simple.
• Standard.

Disa开发者_运维技巧dvantages:

• I can not detect clicks if the lines are crossed. (Which they are.)
• Requires server involvment.

Use multiple small divs

I create tons of 5x5 divs and position them to form a line.

Advantages:

• Can detect clicks.
• Standard.

Disadvantages:

• Crazy.

Give up

I give up and use gwt-connectors. It only draws horizontal and vertical lines but at least it is very simple and the connected objects can be moved.

Which option do you recommend? Any other I have not considered?

If you have CSS3 available: http://jsfiddle.net/rudiedirkx/MKkxX/

Connecting dots, this will require a lot of (very small, very simple) calculations. Server side calculations. The rotations and translations and line lenghts will be different for each line. That's a lot of calculations. But it'll be very simple for the client to do. That's if the client has CSS3 support =)

I would go with: http://raphaeljs.com/ which is a cross platform javascript library that creates and renders SVG

You can add a canvas element and draw a line through script (eg jQuery). Canvas is supported from IE9 and using the IECanvas polyfil.

I loop through each element that has the .class 'wireframe' and add a canvas element inside it. I use the same color as the border so that the canvas maintains the correct style.

$(document).ready(function() {

var id = 1;

$('.wireframe').each(function() {

    var $this = $(this);
    var w = $this.width();
    var h = $this.height();


    //add canvas element with appropriate with and height
    $this.append('<canvas id="canvas' + id + '" width="' + w + 'px" height="' + h + 'px">');

    var canvas = document.getElementById('canvas' + id);
    var ctx = canvas.getContext('2d');

    ctx.strokeStyle = $(this).css("borderColor");

    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(w,h);
    ctx.moveTo(0,h);
    ctx.lineTo(w,0);

    ctx.stroke();

    id++;
});

});