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

Testing whether a point overlaps a character on the canvas

本文关键字：一个重叠字符是否测试更新时间：2023-09-26

我有一个画布，我需要在javascript中绘制文本，然后测试给定点是否与文本重叠。

我想知道这是否可能使用画布(context.fillText(…))，然后进行某种测试(如果(重叠(textobject， {x:12, y:10{}))，或者我是否需要在SVG中绘制字符，所以我有坐标，可以从那里排序?

我相信有一些库已经开始为这类事情弹出，但我今天的谷歌技能遇到了麻烦。

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

一种方法是将文本浮动在canvas元素上(position: absolute;)，然后用jQuery测试悬停事件。另一种方法是在canvas元素的文本周围创建一个框，然后检测鼠标何时在这些范围内。

如果您正在寻找最准确的测试，svg将是您的选择。

您也可以尝试一个库，看看他们是否已经创建了这个功能。画架js

更新:作为一个开放网络和omg HTML5的粉丝，我完全忽略了Flash。事实证明，这是我想做的最好的媒介。由于actionscript和JS是如此的相似，逻辑是复制粘贴的工作。

感谢成堆的答案，它最终是一个巨大的问题，所以我在Illustrator中画了我的角色，打开网格，创建了一个网格穿过角色的数组，然后把它变成一个JS数组。我将在完成后发布一个链接。