0

这两天我研究了很多，我不知所措，所以请善待。我想要做的是在一些文本片段上方创建一个注释。

假设我们有这句话：“这是一个例子”。

因此，如果我想在这样的“这是”片段上方绘制一个形状（路径），在此处输入图像描述 我将如何使用它？（想象一下“16.5 亿美元”是“这是”）

  1. 我怎样才能有我想要的片段的开始和结束。
  2. 你知道一个可以让这个任务更容易的库吗？
  3. 我如何检测一个形状是否与另一个形状重叠（例如注释“这是”和“是”）。

这将是动态的，所以我必须能够以动态的方式完成上述操作。

我不是在寻找代码，只是为了指导。我自己没有任何代码，因为我真的不知道从哪里开始。任何帮助提示将不胜感激。

编辑 我是一个完整的 svg 菜鸟。在我的研究中，我偶然发现了 Raphael.js 和 svg.js 。

4

1 回答 1

4

我可能会将其分为两个不同的任务：

1）文本生成和注释标记：这实际上是更难的部分，因为你的标记可能有重叠。

2)绘制注释：一旦你有了标记的坐标，使用 css 和 svg 背景来绘制注释实际上是相当容易的。

这是一个让您入门的示例：http: //jsfiddle.net/wAq4U/1/。我避免了注释冲突的难题，因此您需要找到一种方法来标记重叠的单词。

在示例中，我使用纯 html 编写句子并用 span 标记注释。然后我使用 css 和 javascript 将注释定位在每个标记的顶部。

<div class="annotation-segment">
   This <span class="marker" data-anno-id="0">is a</span>
   <span class="marker" data-anno-id="1">sample</span> text
</div>

编辑：

这是一个使用拉伸到 100% 的 svg 背景来标记注释的示例。我使用在谷歌上找到的第一个 SVG 示例进行说明，但任何 SVG 都应该可以正常工作：http: //jsfiddle.net/wAq4U/3/

至于重叠标记，这是一个有趣的问题，我很感激你如何设法解决这个问题的更新。

编辑 2：这是一个更具体的示例，说明如何使用 SVG 背景来覆盖标记的长度：http: //jsfiddle.net/wAq4U/4/

于 2013-06-20T10:34:59.777 回答