SVG文本命中测试

Question

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

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

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

最好的问候

Answer 1

你真的进入了痛苦和跨浏览器问题的世界。我最终只对字体进行自定义路径渲染，以使总文本长度可靠且一致。我甚至不想考虑字形击打。

例如，一个问题是firefox（至少3.6）和iirc也有一些版本的opera在缩放时有一些舍入误差，所以当你缩放持有文本的父元素并按照该比例的倒数缩放文本时，那么字母间距与没有任何比例的情况相比会略有不同。 （因为每个字母必须以偶数或类似的字母开头，所以问题可以通过将高档和低档两者相乘得到10000来解决，但这是另一个故事）

不幸的是，使用路径与文本相比，性能影响非常明显。如果您的画布进行任何形式的动画平移或缩放，您应该在动画期间切换到纯文本元素，一旦静态，打开路径渲染以获得准确性。

将svg-fonts转换为路径非常容易，它是纯文本并使用与path-element完全相同的格式。 （谨防字体嵌入许可证！还要记住文件大小，因为你不能使用用户系统中的字体，）

Answer 2

对于基于像素的命中测试 - 如果你切换到HTML5 Canvas，那么这将成为可能。有几个项目可以轻松地从SVG过渡到Canvas，例如： fabric.js。 See a comparison table here

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