Javascript 在pdf.js查看器中渲染时，按pdf文档上的文本位置添加HTML/CSS覆盖

如何以编程方式：

• 将HTML/CSS元素覆盖在PDF.js中呈现的PDF文档上，以及
• 控制在视口中显示的文档部分

使用本机PDF坐标系中的位置

例如，这里的目标是能够突出显示短语的所有出现，或者添加交互式设计元素，这些元素根据我已经从后端的文档中解析出来的文本的位置进行定位

作为一个具体的例子，如果知道短语“This is my Text.”位于我的pdf文档的第4页，则定义此文本在页面中位置的框位于

是否可以1）向下滚动到文档的该行以使其可见，2）在该位置上覆盖一个div

我发现这基本上就是内置的“文本搜索”、“查找下一个”和“查找上一个”功能所做的，但在解释代码时遇到了一些困难。

PDF.js定义了所谓的“文本搜索”，它允许在PDF坐标和屏幕显示之间进行转换。要创建视口，请参见PDF页面的。将坐标转换为屏幕显示：

var screenRect=viewport.converttoviewport矩形（[0,0,14,5]）规范化坐标并在画布上覆盖div

通用查看器的API尚未定义。但是，您可以使用查看器组件获得页面视图：
var pageView=PDFViewerApplication.pdfViewer.getPageView（3）；//获取第4页视图
。页面视图将具有
视口
和
div
-容器。（由于API尚未定义，名称和参数可能会更改）如果您使用的是查看器容器，请注意它们在缩放/滚动期间会定期清理--在
pagerendered
事件后绘制您的内容

滚动仅显示当前视图中区域
screenRect
处的
pageView.div

var pageNumber = 4;
var pdfRect = [0,0,140,150];

var pageView = PDFViewerApplication.pdfViewer.getPageView(pageNumber - 1);
var screenRect = pageView.viewport.convertToViewportRectangle(pdfRect);

var x = Math.min(screenRect[0], screenRect[2]), width = Math.abs(screenRect[0] - screenRect[2]);
var y = Math.min(screenRect[1], screenRect[3]), height = Math.abs(screenRect[1] - screenRect[3]);

// note: needs to be done in the 'pagerendered' event
var overlayDiv = document.createElement('div');
overlayDiv.setAttribute('style', 'background-color: rgba(255,255,0,0.5);position:absolute;' +
  'left:' + x + 'px;top:' + y + 'px;width:' + width + 'px;height:' + height + 'px;');
pageView.div.appendChild(overlayDiv);

// scroll
scrollIntoView(pageView.div, {top: y});

这个变量pdfRect=[0,0140150]实际上是什么；
var pageNumber = 4;
var pdfRect = [0,0,140,150];

var pageView = PDFViewerApplication.pdfViewer.getPageView(pageNumber - 1);
var screenRect = pageView.viewport.convertToViewportRectangle(pdfRect);

var x = Math.min(screenRect[0], screenRect[2]), width = Math.abs(screenRect[0] - screenRect[2]);
var y = Math.min(screenRect[1], screenRect[3]), height = Math.abs(screenRect[1] - screenRect[3]);

// note: needs to be done in the 'pagerendered' event
var overlayDiv = document.createElement('div');
overlayDiv.setAttribute('style', 'background-color: rgba(255,255,0,0.5);position:absolute;' +
  'left:' + x + 'px;top:' + y + 'px;width:' + width + 'px;height:' + height + 'px;');
pageView.div.appendChild(overlayDiv);

// scroll
scrollIntoView(pageView.div, {top: y});