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

Question

我有一个 angular 6 的 tex 编译和 pdf 输出应用程序。 Ace 编辑器用于创建 tex 文件。它可以使用 pdflatex 实时编译。使用 ng2-pdf-viewer 显示输出 pdf。为了实现 synctex（编辑器内容和 pdf 之间的同步），我使用 "synctex view" 命令进行前向搜索，它 returns 一些输出值，例如 h、v、x、y、宽度、高度。我需要在 ng2-pdf-viewer 中突出显示这些点。我在 pdf 查看器中找到了一个 canvas 标签，我创建并附加了一个具有相同高度和宽度的新 canvas 并且能够在 pdf 上绘制形状。但是我无法准确地将其绘制在点所在的位置。有没有人知道这个，这个 synctex 输出点是如何工作的，我们如何使用 canvas 绘图功能突出显示 pdf。

Answer 1

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

"synctex view" 命令的结果 returns 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 命令 returns 多个 h,v.. 值然后循环并附加高亮元素。

希望对您有所帮助。

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

How to highlight synctex output values on ng2-pdf-viewer

javascript

ace-editor

angular

ng2-pdfjs-viewer