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

我正在开发一个Web应用程序，我需要用线连接东西。如果线条不限于水平/垂直，那将会很好。我还需要检测线路上的点击。我认为到目前为止的选择：如何用GWT或HTML + CSS + JavaScript绘制对角线？

使用CSS旋转

我创建一个div或小时用适当的长度，然后我用CSS在自己的风格变换属性。在这个网站的某个地方有一个答案。

优点：

简单。
可以检测点击。

缺点：

需要针对特定浏览器CSS。

服务器

上创建图像我创建了一个网页，这需要fromx，弗罗米，TOX，玩具GET或POST参数，并且给出回线的图像。

优点：

简单。
标准。

缺点：

如果系杂交我无法检测点击。（它们是哪个）
需要服务器参与。

使用多个小的div

创建吨5x5的的div和定位他们形成一条线。

优点：

可检测的点击。
标准。

缺点：

疯狂。

放弃

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

您推荐哪个选项？任何其他我没有考虑过？

来源

2011-05-07 stribika

如果你有CSS3提供：http://jsfiddle.net/rudiedirkx/MKkxX/

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

来源

2011-05-07 18:07:52 Rudie

我会去：http://raphaeljs.com/这是JavaScript库，创建一个跨平台，并呈现SVG

来源

2011-05-07 18:08:23

如果使用SVG，渲染/绘制框将比实际线条大得多。在我的CSS例子中，你只能点击行本身。 – Rudie 2011-05-07 18:13:15

您提出的方法已经在问题中考虑过了，但具有浏览器特定的缺点 - 但我同意，如果您拥有CSS3的奢侈品，那么这是最好的方法 – 2011-05-07 18:16:30

好点。并且，它之间有许多行+对象，SVG甚至CANVAS（[也适用于IE]（http://excanvas.sourceforge.net/））可能会更好。你有我的投票。 – Rudie 2011-05-07 18:19:42

您可以添加一个canvas元素，绘制通过脚本（线如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++; 
});

}）;

来源

2012-09-09 08:43:06

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

回答

相关问题