2

带箭头的表

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

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

更新：我不受 HTML 表的约束。如果需要，表格可以以任何可以被网络浏览器读取的格式生成。

4

2 回答 2

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>

于 2014-02-12T23:32:59.343 回答
0

准备一个箭头的图像。您将它包含在页面中的同一容器（通常是div或span标记）中，该容器包含表本身。该容器被标记为使用absolutecss 定义中的定位。对于您的阵列图像，您指定一个relative定位。现在您可以调整位置以使阵列准确地流向您想要的位置。您可能还必须为数组指定 z-index。

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

  1. 有提供在画布上绘制的 jquery 扩展

  2. 将箭头图像创建为矢量图形（SVG 格式）。该格式可以嵌入脚本以进行交互。这样，您就可以在脚本级别上转动数组并以其他方式与数组进行交互。

于 2013-01-08T13:19:22.913 回答