在HTML页面上绘制箭头以可视化文本跨度之间的语义链接

我有一个HTML页面,其中一些文本跨度标记为这样:

...
p50
...
p65
...
recruitment
...

即每个跨度都有一个ID,并通过其ID引用零个或多个跨度.

我想将这些引用可视化为箭头.

两个问题:

如何将跨度的ID映射到跨度渲染的屏幕坐标？

如何绘制从一个渲染到另一个渲染的箭头？

该解决方案应该在Firefox中工作,在其他浏览器中工作是一个加号,但不是真的必要.该解决方案可以使用jQuery或其他一些轻量级JavaScript库.

1> Phil H..：

---

这引起了我的兴趣,足以产生一点点测试.代码如下,您可以看到它的实际效果

它列出了页面上的所有跨度(如果合适,可能希望将其限制为具有以T开头的ID),并使用"ids"属性来构建链接列表.使用跨距后面的画布元素,它为每个源跨距在跨距的上方和下方交替绘制圆弧箭头.

而你只需要在draw()函数的某个地方调用:

然后是一组跨度背后的画布.

 

p50
...
p65 
...
recruitment
 

根据我的意见,未来的修改:

展平较长箭头的顶部

重构能够绘制非水平箭头:为每个箭头添加一个新画布？

使用更好的例程来获取画布和span元素的总偏移量.

[编辑2011年12月:修复,感谢@Palo]

希望这很有趣,因为它很有趣.

---

不幸的是,在赏金结束之前,全职生活没有给我时间完成它!呃,好吧.

---

谢谢,我希望更频繁地提出这些小挑战.几何,学习API和HTML挫折的好混合(画布还没有文本渲染).它让它变得漂亮!

2> Crescent Fre..：

---

你有几个选择:svg或canvas.

从它的外观来看,你不需要这些箭头有任何特定的数学形式,你只需要它们在元素之间.

试试WireIt.看看这个WireIt演示(已被弃用).它canvas在浮动对话框之间为每条单独的线使用标签div,然后对每个canvas元素进行大小和定位,以在恰当的位置给出连接线的外观.您可能必须实施额外的旋转箭头,除非您不介意箭头以相同的角度进入每个元素.

编辑:该演示已被弃用.

编辑:忽略这个答案,@ Phh H钉了它