Добавить HTML/CSS наложений с помощью текстового расположения на PDF-документ при визуализации в средстве просмотра pdf.js

Question

Как я могу программно:

• наложение HTML/CSS элементы над PDF документа, вынесенного в pdf.js и
• контролирует часть документа, которая показана в окне просмотра

Использование мест в исходной системе координат PDF?

Цель состоит в том, чтобы, например, выделить все вхождения фразы или добавить элементы интерактивного дизайна, которые расположены в соответствии с расположением текста, который я уже обработал из документа на задней панели.

В качестве конкретного примера, если знаете фразу «Это мой текст». находятся на 4-ой странице моего PDF-документ, а поле, определяющее положение этого текста на странице в native pdf coordinate system является

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

Можно ли 1) прокрутите вниз до этой строки документа так видимый, и 2) наложить div над этим местом?

Я вижу, что это по существу то, что встроенные функции «текстовый поиск», «найти следующий» и «найти предыдущие», но с некоторыми проблемами интерпретируют код.

Answer 1

PDF.js определяет так называемый PageViewport, который позволяет преобразовывать между PDF-координатами и представлением на экране. Чтобы создать окно просмотра, см. Страницу PDF getViewport. Преобразование координат в экранное представление: var screenRect = viewport.convertToViewportRectangle([0, 0, 14, 5]); Нормализовать координаты и наложение div на холсте.

API для общего зрителя еще не определен. Однако вы можете получить представление страницы с помощью компонента viewer: var pageView = PDFViewerApplication.pdfViewer.getPageView(3); // get page 4 view. СтраницаView будет иметь viewport и div -контейнер. (Поскольку API еще не определен, имена и аргументы могут измениться) Если вы используете контейнеры для зрителей, обратите внимание, что они периодически очищаются во время масштабирования/прокрутки - нарисуйте ваши вещи после события pagerendered.

Прокрутка только показывает pageView.div в регионе screenRect в данный момент.

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});