如何(以编程方式)在HTML表项之间绘制箭头？

Question

​

​

给定一个标准的静态HTML-table，以编程方式在任意两个HTML-table条目之间绘制箭头的最简单方法是什么？请参见上图中的示例。

我知道HTML5-canvas可以用来绘制图形，但我希望有一种更简单的方法来实现这一点。

更新:我没有绑定到HTML-tables。如果需要，可以用web浏览器可以读取的任何格式生成表格。

Answer 1

我有一个类似的问题，我想在不同表格中的单元格之间绘制箭头，但我认为我听天由命的答案可能对您有效: SVG。如果您是从配置了列/行布局的数据结构中自动生成的，并且您可以确定所需的行高和列宽，那么您应该能够为各行生成坐标，以便在文本上执行任何您想要的操作。

​

<svg width="300" height="100">
    <text x='100' y='0' font-size='18px' text-anchor='end'>
      <tspan x='100' dy='1em'>foo1</tspan>
      <tspan x='100' dy='1em'>foo2</tspan>
      <tspan x='100' dy='1em'>foo3</tspan>
    </text>

    <text x='200 y='0' font-size='18px'>
      <tspan x='200' dy='1em'>foo4</tspan>
      <tspan x='200' dy='1em'>foo5</tspan>
      <tspan x='200' dy='1em'>foo6</tspan>
    </text>

    <line x1='100' y1='0.8em' x2='200' y2='2.8em' style="stroke:#999999"/>
    <line x1='100' y1='1.8em' x2='200' y2='1.8em' style="stroke:#999999"/>
    <line x1='100' y1='1.8em' x2='200' y2='0.8em' style="stroke:#ff0000"/>
    <line x1='100' y1='0.8em' x2='200' y2='1.8em' style="stroke:#ff0000"/>
    <line x1='100' y1='2.8em' x2='200' y2='2.8em' style="stroke:#00ff00"/>
  </svg>

​

Answer 2

准备一个箭头的图像。您可以将其包含到页面中的同一容器(通常是div或span标记)中，该容器包含表本身。该容器被标记为使用css定义中的absolute定位。对于数组映像，您需要指定一个relative定位。现在，您可以调整位置，使数组流到您想要的位置。您可能还需要为数组指定一个z索引。

然而，这与箭头的角度有一些问题。显然，您可以使用css的宽度和高度属性对其进行伸缩和弯曲，但不能对其进行翻转。至少据我所知不是。如果您需要一个数组，您可以自由地旋转，例如，如果您通过脚本代码动态地可视化箭头，那么您可能更喜欢以下方法之一：

jquery

• 提供了一些扩展，可以在画布上绘制

• ，将箭头图像创建为矢量图形(SVG格式)。该格式可以嵌入用于交互的脚本。这样，您就可以在脚本级别上转换并以其他方式与数组进行交互。