一个电子教材项目中有这样一个需求：
用户向网站上传一个PDF书籍后，网站可以对PDF书籍进行解析，并支持用户对PDF书籍的每一页做一些操作，比如：为英语课本的单词和句子添加音频热区。因为热区数量很多，所以，希望网站 “在初始化课本页面的时候，自动初始化热区，然后用户再在此基础上调整”，这样可以大大减少工作量。
我使用pdf.js来实现该功能，该库可以获取到pdf中的文本及位置、宽高，但这些位置尺寸使用起来有几处值得注意的细节（稍不注意，可能会被卡很久）。
一、pdf.js提供的文本信息
如图所示，这是一个PDF页面中获取到的文本信息。这里要用到的字段有：height(高)、width(宽)、transform(这是组matrix矩阵数据，其中最末两位分别是水平方向和垂直方向的位置信息)。
二、transform数据对应的坐标系
1）初始坐标数据
通常，我们定位一个元素时，会设置它的left和top，left的数值从左向右递增，top的数值自上而下递增；而transform中的垂直方向数值是从下往上递增的。（下图是坐标系不同导致的错误结果，这个结果是多种原因造成的，后续我们逐一修正）
2）矫正坐标数据(垂直方向翻转)
基于上一步，首先，先来矫正坐标系。我们将垂直方向的数值进行矫正：
新值 = pdf页面高度 - 旧值。
再次渲染后，会发现垂直方向的坐标系已经对了。但仍有两个问题：一个是横纵方向的定位都存在偏差，另一个是热区的宽高比实际文本所占空间大。这主要是因为“绘制pdf的canvas画布的width、height”和“canvas画布在页面布局中被定义的样式style中的width、height”不一致，二者存在比例换算。
三、数据换算
1）矫正比例换算
基于上一步，结合canvas的内外尺寸来矫正热区的宽高和定位：
left = textinfo.transform[4] / canvas.width * canvas.style.width;
top = textinfo.transform[5] / canvas.height * canvas.style.height;
width = textinfo.width / canvas.width * canvas.style.width;
height = textinfo.height / canvas.height * canvas.style.height;
再次渲染后，会发现水平方向的尺寸、定位已经对了。但垂直方向上的定位仍然存在少许偏差。这个问题很细节，我困扰了好几个小时才发觉：我们已经知道初始时的垂直坐标是自下而上的，那么在垂直翻转时，应该把文本所占的高度也减掉才对。
2）再次矫正垂直方向数值
新值 = (pdf页面高度 - 旧值 - 文本自身高度) / canvas.height * canvas.style.height。
修改后再次渲染，可以发现效果已经符合预期了。
四、相关代码片段展示
initHotspots() {
let pdfDoc = this.loadingTaskDict[this.pageActiveIndex] || this.loadingTask;
if (!pdfDoc) return;
pdfDoc.promise.then((pdf) => {
let pageIndex = this.loadingTaskDict[this.pageActiveIndex] ? 1 : this.pageActiveIndex;
pdf.getPage(pageIndex).then((page) => {
let view = page.view || [];
let pdfPageWidth = view[2] - view[0]; // pdf页面宽度(canvas.width)
let pdfPageHeight = view[3] - view[1]; // pdf页面高度(canvas.height)
page.getTextContent().then((textInfo) => {
textInfo = textInfo || {};
let textItems = textInfo.items || [];
// bookPageDom是网页中pdf页面的包裹元素(bookPageInfo.width相当于canvas.style.width)
let bookPageDom = document.querySelector('.book-page');
let bookPageInfo = bookPageDom ? bookPageDom.getBoundingClientRect() : null;
textItems.forEach((v) => {
if (/[a-zA-Z]+/i.test(v.str) && v.str.length > 7 && bookPageInfo) {
let x = (v.transform[4] / pdfPageWidth) * 100 + '%';
let y = ((pdfPageHeight - (v.transform[5] + v.height)) / pdfPageHeight) * 100 + '%';
this.addHotpot({
top: y,
'y%': y,
left: x,
'x%': x,
width: (v.width / pdfPageWidth) * bookPageInfo.width,
height: (v.height / pdfPageHeight) * bookPageInfo.height,
original: v.str,
styles: { left: x, top: y }
});
}
});
});
});
});
},五、最后
上方的截图，因为受制于页面布局，课本页面的尺寸比较小，看不清楚。所以，下面是一张demo效果图：
