Question

我有一个用于tex编译和pdf输出的angular 6应用程序。 Ace编辑器用于创建tex文件。可以使用pdflatex进行实时编译。使用ng2-pdf-viewer显示pdf输出。为了实现synctex（编辑器内容和pdf之间的同步），我使用了“ synctex view”命令进行正向搜索，它返回一些输出值，例如h，v，x，y，width，height。我需要在ng2-pdf-viewer中强调这些点。我在pdf查看器中找到了一个画布标签，并创建并附加了一个具有相同高度和宽度的新画布，并能够在pdf上绘制形状。但是我无法绘制出点的确切位置。是否有人对此有任何想法，此synctex输出点如何工作以及如何使用画布绘制功能突出显示pdf。

Answer 1

经过数小时的研究，我在ng2-pdf-viewer中找到了synctex高亮的解决方案。与其在画布上绘制synctex输出值，不如创建一个div元素并根据这些值调整其top，left，width，height。在此之前，我们需要重新计算相对于pdf查看器的值。

“ synctex view”命令的结果返回v，h，宽度，高度，页码值。然后解析如下。

var pageno     = parseInt(datas['pageNum']);
//i'm using ng2-pdf-viewer, ViewChild('pdfviewer');
var pageView   = this.pdfviewer.pdfViewer._pages[pageno - 1];
//datas - array returning from server contains synctex output values
var left       = parseInt(datas['h']);
var top        = parseInt(datas['v']);
var width      = parseInt(datas['width']);
var height     = parseInt(datas['height']);
//recalculating top value
    top        = pageView.viewport.viewBox[3] - top;
var valueArray = [left,top,left + width,top + height];
let rect       = pageView.viewport.convertToViewportRectangle(valueArray);
    rect       = pdfjs.Util.normalizeRect(rect);
var x          = Math.min(rect[0], rect[2]), width = Math.abs(rect[0] - rect[2]);
var y          = Math.min(rect[1], rect[3]), height = Math.abs(rect[1] - rect[3])
const element  = document.createElement('div');
      element.setAttribute("class", "overlay-div-synctex");
      element.style.left     = x + 'px';
      element.style.top      = y + 'px';
      element.style.width    = width + 'px';
      element.style.height   = height + 'px';
      element.style.position = 'absolute';
      element.style.backgroundColor = 'rgba(255,255,0,0.5)';
      //jquery is used here, replace it with javascript
      $('*[data-page-number="'+pageno+'"]').append(element);
      this.pdfviewer.pdfViewer._scrollIntoView({
          pageDiv: pageView.div
      });

如果您的synctex命令返回多个h，v ..值，则循环并附加高亮元素。

希望有帮助。

如何在ng2-pdf-viewer上突出显示synctex输出值

1 个答案: