pdf.js源码分析-textLayer中的坐标计算

在pdf.js中显示pdf内容和选择pdf文字属于不同的层，一个是canvas绘制，一个是使用dom进行布局，那么接下来先看一下在textLayer中的文字节点div是怎么计算每段文字的布局位置的吧。

首先找到pdf.js源码中的text_layer.js文件，然后得到下面方法appendText方法，下面的解释是在字体没有发生旋转时候，正常横向文本的一个解释

  // 创建字符串的div
  const textDiv = document.createElement("span");
  // 根据字体计算出字体的ascent，也就是字体上悬线的位置，也就是字母的上边缘位置
  const fontAscent = fontHeight * getAscent(fontFamily);
  

  // 计算textlayer中字符串div的位置left和top，这里tx表示一个位移的matrix矩阵，其中tx[4]表示x轴位置，tx[5]表示y轴位置
  let left, top;
  if (angle === 0) {
    left = tx[4];
    // matrix中ty的位置实际高度，减去字体的ascent的高度
    top = tx[5] - fontAscent;
  } else {
    left = tx[4] + fontAscent * Math.sin(angle);
    top = tx[5] - fontAscent * Math.cos(angle);
  }

  // 将left和top的位置计算为百分比，其中_pageWidth, _pageHeight表示document的viewport的宽度和高度，也就是绘制当前pdf页面的宽度高度
    divStyle.left = `${((100 * left) / task._pageWidth).toFixed(2)}%`;
    divStyle.top = `${((100 * top) / task._pageHeight).toFixed(2)}%`;

以上便是在pdf.js中text_layer的字符串位置计算获取方法