测试一个点是否与画布上的字符重叠

Question

我有一个canvas，需要在javascript中绘制文本，并测试给定的点是否与文本重叠。

我想知道是否可以使用canvas（context.fillText(...)）以及某种测试（if (overlap(textobject, {x:12, y:10{}) )来实现，或者是否需要在SVG中绘制字符，这样我就有了坐标并可以从那里进行排序？

我相信已经出现了一些针对这种情况的库，但今天我的谷歌技能有些不足。

- jamie-wilson

---

如果你必须只使用画布，我建议将文本填充到一个空白画布中（不一定要在页面上），然后使用 getImageData() 来确定给定的像素是否是非透明的。 - Phrogz

Answer 1

我可以想到一些方法来解决这个问题，除非你需要将文本绘制到画布上进行某种像素操作...

其中一种方法是将文本浮动在画布元素上（position: absolute;），然后使用jQuery测试悬停事件。另一种方法是在画布元素中创建一个框，然后检测鼠标是否在该范围内。

如果你正在寻找最准确的测试方法，SVG 是最好的选择。

你也可以尝试使用库，看看它们是否已经创建了这个功能。easel js

- newshorts

Answer 2

更新：作为一个开放网络的粉丝和狂热的HTML5支持者，我完全忽略了Flash。事实证明，它是我正在尝试做的最好的媒介。由于ActionScript和JS非常相似，所以逻辑上只需要复制粘贴即可。

---

非常感谢您的回答，这是一个巨大的要求，所以我在Illustrator中绘制了我的字符，打开了网格，在网格交叉字符和不交叉字符的位置创建了一个数组，然后将其转换为JS数组。完成后，我会发布链接。

- jamie-wilson