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的字符串位置计算获取方法