SVG文本命中测试

Question

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

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

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

最好的祝福

Answer 1

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

\n\n

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

\n