Question

如何获取某个节点中每个字符的位置（左侧，顶部）？我只知道一种方法：将每个字符包装在它自己的标签中，然后我们可以得到它的坐标。但它有点慢

Answer 1

我在问题上找到了答案 - 范围界面可以显示我需要的所有信息（更多信息 - http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html）。

Answer 2

您可以缓存已经看过的字符宽度。

function findOffset(index) {
  // Set some variables early on
  var sizes          = {},
      text           = "The text you are getting an offset from.",
      lineHeight     = 16,  // You can get this dynamically if you want
      containerWidth = 500, // Same with this one
      leftOffset     = 0,
      topOffset      = 0,
      i              = 0,
      cur;

  // Loop through and count up the sizes of each character until this one
  for (; (i < text.length) && (i <= index); i++) {

    // Set the current character
    cur = text.charAt(i);

    // Check to see if we have a size
    if ( typeof size[cur] == "undefined" ) {
      // If not: Wrap it in a span (You seemed to already know how to do this)
      // then cache the result
      size[cur] = findWidthByTemporarilyWrappingInASpan(text, i);
    }

    // If it's greater than a line can hold, we'll wrap
    if ( (sizes[cur] + leftOffset) > containerWidth ) {

      // Reset the left offset
      leftOffset = 0;

      // Increment the top offset
      topOffset += lineHeight;
    }
    // Otherwise, increment from the left
    else {
      leftOffset += sizes[cur];
    }
  }

  // return an object with the coordinates
  return {
    leftOffset: leftOffset,
    topOffset : topOffset
  };
}

然后你甚至可以记住你抓住的每个索引，并在下次调用此函数时从一个关闭开始。这意味着你要远离dom，除了通常不超过~50（字母数字+标点符号等）时间，而不是每个字符。

这肯定适用于等宽字体，但我认为其他类型有一些优点。你只需要为不同的浏览器进行包装研究。

另外，请注意，这假设是左对齐等等。它更多的是一个想法，而不是实际的代码解决方案。

如何获得每个角色的位置

2 个答案: