针对文本形状进行测试 [英] Hit testing against text shapes

问题描述

我想知道给定点是在文本形状的内部还是外部。正如您在下面提供的示例中所注意到的那样， hitTest 将在点内部时返回 true TextItem 的边界，而且不仅仅是该点位于角色本身内部。 （当您将鼠标指针放在＃的中间时，您可以最好地体验这种行为）

I want to know whether a given point is inside or outside of a text shape. As you will notice in the sample I provided below, hitTest will return true as soon as the point is inside of the TextItem's bounds, and not only if the point is inside of the character itself. (You can experience this behavior best when you place your mouse pointer in the middle of the #)

示例：针对TextItem的命中测试

我也是尝试根据路径绘制角色（如Raphaël正在字体样本）使用路径本身进行命中测试，但偶然发现一些非常奇怪的行为，其中（某些）字符未正确绘制。 （如果将路径定义复制到矢量图像软件，如 Inkscape ，则正确绘制文本形状）

I also tried drawing the character based on paths (as Raphaël is doing in their font samples) to use the paths itself for hit-testing but stumbled upon some quite strange behavior where (some) characters are not drawn correctly. (If you copy the path definition into a vector image software like Inkscape the text shapes are drawn correctly)

< a href =http://jsfiddle.net/rponudic/zdyLeqvm/ =nofollow>示例：将文本绘制为路径

什么是找出给定点是在文本形状内部还是外部的最有希望的方法？

What is the most promising way to find out whether a given point is inside or outside of a text shape?

推荐答案

花了很长时间调试 paper.js 代码我终于找到了解决这个问题的方法。

After spending quite some time debugging paper.js code I finally found the solution for this problem.

你应该使用而不是 Path CompoundPath ：

Instead of using Path you are supposed to use CompoundPath:

复合路径包含两个或多个路径，在路径重叠的位置绘制孔。复合路径中的所有路径都采用最后面路径的样式，可以通过其item.children列表进行访问。

A compound path contains two or more paths, holes are drawn where the paths overlap. All the paths in a compound path take on the style of the backmost path and can be accessed through its item.children list.

I还更新了上面的例子：

I also updated the example from above:

http：// jsfiddle.net/64v7s6L9/1/

这篇关于针对文本形状进行测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！