Pan-缩放PDF (Javascript)
Pan-缩放PDF (Javascript)
提问于 2021-12-20 22:55:55
我试着用包含PDF文档的鼠标进行缩放.我正在使用PDF.js和泛变焦库(但欢迎其他工作选择)
下面的代码片段基本上完成了这个任务，但是不幸的是，在is泛缩之后，PDF没有重新呈现，然后它的图像变得模糊(用鼠标平移PDF并用鼠标轮缩放它)：
HTML
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.3.2/dist/panzoom.min.js"></script>
<div id="panzoom-container">
<canvas id="the-canvas"></canvas>
</div>
<style>
#the-canvas {
border: 1px solid black;
direction: ltr;
}
</style>JAVASCRIPT
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://mozilla.github.io/pdf.js/build/pdf.worker.js';
var pdfDoc = null,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
var container = document.getElementById("panzoom-container")
function renderPage(desiredHeight) {
pdfDoc.getPage(1).then(function(page) {
var viewport = page.getViewport({ scale: 1, });
var scale = desiredHeight / viewport.height;
var scaledViewport = page.getViewport({ scale: scale, });
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: ctx,
viewport: scaledViewport
};
page.render(renderContext);
});
}
// Get the PDF
var url = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
// Initial/first page rendering
renderPage(250);
});
var panzoom = Panzoom(container, {
setTransform: (container, { scale, x, y }) => {
// here I can re-render the page, but I don't know how
// renderPage(container.getBoundingClientRect().height);
panzoom.setStyle('transform', `scale(${scale}) translate(${x}px, ${y}px)`)
}
})
container.addEventListener('wheel', zoomWithWheel)
function zoomWithWheel(event) {
panzoom.zoomWithWheel(event)
}https://jsfiddle.net/9rkh7o0e/5/
我认为这个程序是正确的，但不幸的是，我陷入了两个必须解决的问题(然后我请求你的帮助)：
- 我不知道如何重新渲染正确的PDF后发生的泛变焦。
- 连续的呈现必须排队，以使这个工作正常(这样PDF不会眨眼时，泛缩放)，我如何才能修正1和2？除了泛缩放库之外，我在PDF上找不到任何工具来完成这个操作。
谢谢
回答 1
Stack Overflow用户
发布于 2021-12-27 23:39:43
经过几天的尝试，我解决了这个问题。棘手的部分是在容器被缩放后缩小包含的画布，并设置一个转换源CSS属性集：
canvas.style.transform = "scale("+1/panzoom.getScale()+")"这是一个PDF的小提琴，可以放大。每一个新的渲染都是在一个小延迟(这里设置为250 is )之后完成的，这对应于一种“轮停事件”。
function zoomWithWheel(event) {
panzoom.zoomWithWheel(event)
clearTimeout(wheelTimeoutHandler);
wheelTimeoutHandler = setTimeout(function() {
canvas.style.transform = "scale("+1/panzoom.getScale()+")"
if (pdfDoc)
renderPage(panzoom.getScale());
}, wheelTimeout)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70428922
复制相关文章
相似问题
腾讯云开发者
