7

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

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

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

最好的祝福

4

2 回答 2

2

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

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

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

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

于 2011-08-15T21:08:22.870 回答
0

至于基于像素的命中测试——如果你切换到 HTML5 Canvas，那么这将成为可能。有几个项目提供了从 SVG 到 Canvas 的轻松转换，例如fabric.js。请参阅此处的比较表。

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

于 2011-08-15T19:45:31.653 回答