如何用GWT或HTML+CSS+JavaScript绘制对角线？

Question

我正在开发一个网络应用程序，我需要用线连接东西。如果线条不限于水平/垂直，那就太好了。我还需要检测线路上的点击。到目前为止我考虑的替代方案：

使用 CSS 旋转

我创建一个具有适当长度的 div 或 hr，然后在其样式中使用 CSS 变换属性。在这个网站的某个地方有一个关于它的答案。

优点：

• 简单。
• 可以检测点击。

缺点：

• 需要浏览器特定的 CSS。

在服务器上创建图像

我创建了一个网页，它将 fromx、fromy、tox、toy 作为 GET 或 POST 参数，并返回该行的图像。

优点：

• 简单。
• 标准。

缺点：

• 如果线交叉，我无法检测到点击。 （确实如此。）
• 需要服务器参与。

使用多个小 div

我创建了大量 5x5 div 并将它们放置成一条线。

优点：

• 可以检测点击。
• 标准。

缺点：

• 疯狂。

放弃

我放弃并使用 gwt-connectors。它只绘制水平线和垂直线，但至少它非常简单并且连接的对象可以移动。

您推荐哪个选项？还有其他我没有考虑过的吗？

Answer 1

如果您有 CSS3 可用： http://jsfiddle.net/rudiedirkx/MKkxX/

连接点，这将需要大量（非常小，非常简单）的计算。服务器端计算。每条线的旋转和平移以及线长度都不同。这是很多计算。但这对客户来说非常简单。如果客户端支持 CSS3 =)

Answer 2

我会选择： http://raphaeljs.com/ 这是一个跨平台的 javascript 库，用于创建和渲染 SVG

Answer 3

您可以添加画布元素并通过脚本（例如 jQuery）绘制一条线。 Canvas 从 IE9 开始受支持并使用 IECanvas polyfil。

我循环遍历每个具有 .class“线框”的元素，并在其中添加一个画布元素。我使用与边框相同的颜色，以便画布保持正确的样式。

$(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++;
});

});