平移缩放渲染的图像

时间:2018-10-03 17:52:38

标签: javascript svgpanzoom

我正在使用pdfjs库将图像渲染到SVG中,并且它可以正常工作,然后我想使用svg-pan-zoom lib启用缩放功能。

import * as panZoom from "svg-pan-zoom";

private renderPage(page, scale) {
      const viewport = page.getViewport(scale);
      this.container.removeChild(document.getElementById('the-svg'));
      this.container.appendChild(this.createSvgDiv());
      const svgDiv = document.getElementById('the-svg');

    svgDiv.style.width = viewport.width + 'px';
      svgDiv.style.height = viewport.height + 'px';
      page.getOperatorList()
        .then(function (opList) {
          var svgGfx = new PDFJS.SVGGraphics(page.commonObjs, page.objs);
          return svgGfx.getSVG(opList, viewport);
        })
        .then(function (svg) {
          svgDiv.appendChild(svg);
          //after this uccurs error
          setTimeout(() => { panZoom(svg)
          }, 6000)
        });
    }

超时以确保渲染完成,渲染pdf图像大约需要1秒钟,然后在执行超时回调后,我收到此错误

core.js:1449 ERROR Error: Cannot get SVG.
    at Object.getSvg (utilities.js:95)
    at svgPanZoom (svg-pan-zoom.js:747)
    at Painter.ts:59
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at e.invokeTask (polyfills.js:3)
    at i.isUsingGlobalCallback.invoke (polyfills.js:3)
    at n (polyfills.js:3)

图书馆站点:https://www.npmjs.com/package/svg-pan-zoom

0 个答案:

没有答案