javascript - 如何用GWT或HTML+CSS+JavaScript画对 Angular 线？

Question

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

使用 CSS 旋转

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

优点:

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

缺点:

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

在服务器上创建图像

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

优点:

• 简单。
• 标准。

缺点:

• 如果线条交叉，我无法检测到点击。 (他们是。)
• 需要服务器参与。

使用多个小div

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

优点:

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

缺点:

• 疯狂。

放弃

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

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

Answer 1

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

连接点，这会需要很多(很小，很简单)的计算。服务器端计算。每行的旋转和平移和行长将不同。这是很多计算。但这对客户来说非常简单。如果客户端支持 CSS3 =)