2011-08-10 32 views
6

我试图为使用客户端JavaScript的SVG文本元素实现冲突检测。命中测试应检查文本的任何字形是否与其他文本元素的任何字形重叠。由于getBBoxgetExtentOfChar是准确的我需要一个自定义的解决方案。SVG文本点击测试

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

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

问候

回答

0

至于基于像素的命中测试 - 如果切换到HTML5画布,那么这将成为可能。几个项目提供了从SVG到画布的简单过渡,例如fabric.jsSee a comparison table here

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

1

你真的进入了一个痛苦和跨浏览器问题的世界。我最终只做了自定义的字体路径渲染,使得文本长度可靠且一致。我甚至不想考虑雕文。

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

不幸的是,使用路径与文本相比的性能影响相当大显。如果您的画布执行任何形式的动画平移或缩放,则应在动画期间切换为纯文本元素,并且一旦静态,请打开路径渲染以确保准确性。

幸运地,将svg-fonts转换为路径非常简单,它是明文并使用与路径元素完全相同的格式。 (不过要注意字体嵌入许可证!还要记住文件大小,因为你不能使用用户系统的字体)