SVG文本命中测试

Question

我正在尝试使用客户端JavaScript为SVG文本元素实现碰撞检测。 命中测试应该检查一个文本的任何字形是否重叠另一个文本元素的任何字形。 由于 getBBox 和 getExtentOfChar 不太精确，因此我需要一个自定义解决方案。

我的第一种方法是获取元素每个坐标/像素的颜色，并手动执行命中测试，但这不起作用，因为无法获取坐标的颜色。 它需要额外的画布来获取像素颜色，这是一个可怕的解决方法。

现在，我考虑将文本或字形转换为多边形进行命中测试。 这是可能的吗？ 或者有其他基于字形的命中测试方法吗？

最好的问候。

- Jay

Answer 1

你真的要进入一个痛苦和跨浏览器问题的世界。我最终只能定制字体路径渲染，以获得可靠和一致的总文本长度。我甚至不想考虑字形命中。

例如，一个问题是Firefox（至少3.6）和iirc也有一些版本的Opera在缩放时存在一些舍入误差，因此当你缩放包含文本的父元素并按比例缩放文本时，与没有任何缩放相比，字母间距会略有不同。（因为每个字母必须从偶数开始或类似的东西，可以通过将上下缩放倍数乘以10000来解决问题，但这是另一个故事）

与文本相比，使用路径的性能影响很明显。如果您的画布进行任何形式的动态平移或缩放，则应在动画期间切换到纯文本元素，并在静态时打开路径渲染以提高准确性。

幸运的是，将SVG字体转换为路径非常容易，它是纯文本，使用与路径元素完全相同的格式。（但要注意字体嵌入许可证！还要注意文件大小，因为您无法使用用户系统中的字体。）

- aero

Answer 2

关于基于像素的命中测试 - 如果您切换到HTML5 Canvas，则将变得可能。几个项目提供了从SVG到Canvas的简单过渡，例如fabric.js。在此处查看比较表。

至于基于多边形的方法-这是可能的，但很困难。您可以使用某些工具（例如Inkscape的文本转路径）将文本或字形转换为多边形（路径）。然后就会有计算。为任何文本制作通用解决方案需要大量的工作。但是，如果文本不改变，则手动使用路径绘制文本可以是一个快速而肮脏的解决方案。

- Infeligo