如何在 jQuery/javascript 中获取文本本身顶部的位置，而不是文本元素

Posted 2023-02-25

【中文标题】如何在 jQuery/javascript 中获取文本本身顶部的位置，而不是文本元素

【英文标题】：How to get position of top of text itself, rather than text element, in jQuery/javascript

【发布时间】：2011-11-09 14:29:51

【问题描述】：

我不确定这是否可能，但这里是：

我想找到一些文本的 y 坐标。出于我的目的，包含该文本的 元素的 y 坐标 是不够的。原因如下：

http://jsfiddle.net/3kh3p/

上面的jsfiddle中有两个字符，一个在Georgia，一个在Verdana。它们都绝对定位为 top:0。如您所见，Verdana 字符的起始点比 Georgia 字符低。

我需要相当准确地获取文本本身的 y 坐标，因为我正在使用该值通过 php 的 imagettftext 函数将文本写入图像，并且超出 5 或 10 个像素是不行的。

有办法吗？

【问题讨论】：

在英文中我们将字母对齐到底部

@Joseph：在英语中，我们将字母与它们的基线对齐，这不一定是底部（想想g、q 和其他descenders）。

【参考方案1】：

我能想到的唯一方法是将文本（fillText）绘制成canvas element，然后查询元素的pixel data（getImageData 等）以找出给定字符的实际位置根据您要使用的任何标准垂直开始（例如，您是否要忽略向上的衬线等）。不是因为胆小的人，如果有任何其他方法可以实现您的总体目标，我会寻找其他地方。