WebSDK中鼠标滚轮操作的缺省响应逻辑如下:
- 鼠标滚轮,向上 / 下翻看PDF页面内容
- Ctrl+鼠标滚轮,对当前PDF视图进行页面缩放,默认的缩放步进值为10%左右
针对图纸等类型的PDF文件:
- 如果希望通过鼠标滚轮直接控制PDF页面的缩放效果,则需要先获取到鼠标滚轮事件,然后调用preventDefault()接口阻止原有的鼠标滚轮响应 —— 向上/下翻看PDF页面内容
- 如果希望禁用Ctrl + 鼠标滚轮对PDF页面的缩放效果,可以参考开发者手册中"组件"-"基础组件"中"viewer组件"章节的内容,移除掉viewer组件上的"@zoom-on-wheel"指令即可。
示例代码如下:
pdfui.addViewerEventListener(Events.openFileSuccess, async function (pdfdoc) {
loadingComponentPromise.then(function (component) {
component.close();
});
//PDF打开成功后才会出现侧边栏的滚动条,才可以获取到PDF预览区域的DOM元素,在该元素上添加鼠标滚轮事件监听器,监听滚轮的动作,设置对应的缩放比例
const zoomableContent = document.getElementsByClassName('fv__pdf-viewer');
zoomableContent[0].addEventListener('wheel', async function (event) {
//阻止原有的鼠标滚轮响应:翻页
event.preventDefault();
//获取当前视图的缩放比例
var docRender = await pdfui.getPDFDocRender();
//docRender.getScale();
var zoomValue = await docRender.getScaleRatio();
console.log("当前缩放比例:", zoomValue);
const delta = event.deltaY;
if (delta < 0) {
// 鼠标滚轮向上滚动,放大
zoomValue += 0.05;
} else {
// 鼠标滚轮向下滚动,缩小
zoomValue -= 0.05;
}
pdfui.zoomTo(zoomValue);
});
//视图模式中的“单页视图” 和 “对开视图”是SDK封装好的内置组件,在该视图模式下,SDK也会监听滚轮事件,并同时做出翻页的响应。如果希望通过鼠标滚轮直接控制页面缩放,则需要将这两个视图模式禁用,以免影响交互体验。
if (pdfdoc.getPageCount() > 1) {
var singlePageBTN = await pdfui.getComponentByName('single-page');
singlePageBTN.doDisable();
var facingPageBTN = await pdfui.getComponentByName('facing-page')
facingPageBTN.doDisable();
}
});