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

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

本文关键字：CSS JavaScript 绘制 对角线 HTML 何使用 GWT      更新时间：2023-09-26

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

使用 CSS 旋转

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

优势：

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

弊：

  • 需要特定于浏览器的 CSS。

在服务器上创建映像

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

优势：

  • 简单。
  • 标准。

弊：

  • 如果越线，我无法检测到点击。（他们是。
  • 需要服务器参与。

使用多个小潜水

我创建了大量的 5x5div 并将它们定位成一条线。

优势：

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

弊：

  • 疯狂。

放弃

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

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

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

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

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

你可以添加一个画布元素并通过脚本画一条线（例如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++;
});

}）;

相关文章：