通過文字位置上的PDF文件添加HTML/CSS覆蓋在pdf.js觀衆呈現時

Question

如何以編程：

• 覆蓋HTML/CSS元素在上呈現pdf.js PDF文檔，並
• 控制在視口中顯示的文檔部分

在本機PDF座標系中使用位置？

這裏的目標是要能夠，例如，突出一個短語所有出現或添加根據我已經分析出的文檔在後端文本的位置定位交互設計元素。

作爲一個具體的例子，如果知道這句話'這是我的文字'。位於我的PDF文件第4頁，並定義頁面上的native pdf coordinate system這個文本的位置盒子

bottom left corner = (0,0) 
top right corner = (14, 5) 

是否有可能1）向下滾動到該行的文件，因此它是可見，2）覆蓋這個位置的div？

我看到這基本上是內置的「文本搜索」，「查找下一個」和「查找prev」功能，但它在解釋代碼時遇到了一些麻煩。

Answer 1

PDF.js定義了所謂的PageViewport，它允許在PDF座標和屏幕上的顯示之間進行轉換。要創建視口，請參閱PDF頁面的getViewport。將座標轉換爲屏幕演示文稿：var screenRect = viewport.convertToViewportRectangle([0, 0, 14, 5]);在畫布上標準化座標併疊加div。

通用查看器的API尚未定義。但是，您可以使用查看器組件獲取頁面視圖：var pageView = PDFViewerApplication.pdfViewer.getPageView(3); // get page 4 view。 pageView將有viewport和div -container。 （由於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});