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

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 查看器中找到了一个 Canvas 标签，我创建并附加了一个具有相同高度和宽度的新 Canvas ，并且能够在 pdf 上绘制形状。但是我无法将其准确绘制在点所在的位置。有没有人对此有任何想法，这个同步输出点是如何工作的，以及我们如何使用 Canvas 绘制功能突出显示 pdf。

Answer 1

经过数小时的研究，我在 ng2-pdf-viewer 中找到了同步文本突出显示的解决方案。
我们可以创建一个 div 元素并根据这些值调整其顶部、左侧、宽度和高度，而不是在 Canvas 上绘制同步输出值。在此之前，我们需要重新计算相对于我们的 pdf-viewer 的值。

“synctex view”命令的结果返回 v、h、width、height、页码值。
然后解析如下。

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.. 值，则循环并附加高亮元素。

希望能帮助到你。