Как визуализировать только область просмотра при масштабировании? - PullRequest
Новая
       25

Как визуализировать только область просмотра при масштабировании?

0 голосов
/ 04 мая 2020

У меня есть компонент React, который позволяет отображать pdf в программе просмотра с использованием pdf. js. Я хотел бы отображать только область просмотра при zoomIn / zoomOut, чтобы избежать перезагрузки всей страницы. Как повторно использовать этот видовой экран вне холста? 

zoomIn = () => {
const { scale } = this.state;
const scaleZoomIn = scale + 0.25;
this.setState({ scale: scaleZoomIn });
// this.renderPage();
}

zoomOut = () => {
const { scale } = this.state;
const scaleZoomOut = scale - 0.25;
this.setState({ scale: scaleZoomOut });
// this.renderPage();
}

renderPage = debounce(async () => {
this.setState({ isPageLoading: true });
const { currentPage, pdf, scale } = this.state;
const pdfObj = pdf;
const page = await pdfObj.getPage(currentPage);
const viewport = page.getViewport({ scale });

// Prepare canvas using PDF page dimensions
const canvas = this.canvasRef.current;

const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;

// Render PDF page into canvas context
const renderContext = {
  canvasContext: context,
  viewport,
};

const newRenderTask = page.render(renderContext);
await newRenderTask.promise;
this.setState({ isPageLoading: false });
}, 300)
...