提交 a26457df authored 作者: gzcnkilys_admin's avatar gzcnkilys_admin

fix:解决单双页放大缩小的渲染问题

暂未解决放大缩小以后的turn.js的翻页可触控区域问题和翻页动画位置错误的问题。
上级 3ac2a8ee
...@@ -226,16 +226,26 @@ const calculatePageDimensions = (viewportWidth, viewportHeight, zoom = 1.0) => { ...@@ -226,16 +226,26 @@ const calculatePageDimensions = (viewportWidth, viewportHeight, zoom = 1.0) => {
// 更新页面尺寸 // 更新页面尺寸
const updatePageDimensions = (dimensions, $magazine) => { const updatePageDimensions = (dimensions, $magazine) => {
// 直接更新 turn.js 尺寸 // 直接更新 turn.js 尺寸
if (isMobile.value) {
$magazine.turn("size", dimensions.scaledWidth, dimensions.scaledHeight);
} else {
$magazine.turn("size", dimensions.scaledWidth * 2, dimensions.scaledHeight); $magazine.turn("size", dimensions.scaledWidth * 2, dimensions.scaledHeight);
}
$magazine.turn('resize');
$magazine.turn('update');
// 更新页面尺寸 // 更新页面尺寸
$magazine.children().each(function () { // $magazine.children().each(function () {
const $page = $(this); // const $page = $(this);
$page.css({ // $page.css({
width: dimensions.scaledWidth, // width: dimensions.scaledWidth,
height: dimensions.scaledHeight, // height: dimensions.scaledHeight,
}); // });
}); // });
}; };
// 更新视口样式 // 更新视口样式
...@@ -263,7 +273,6 @@ const restoreLoadedImages = (visiblePages, $magazine) => { ...@@ -263,7 +273,6 @@ const restoreLoadedImages = (visiblePages, $magazine) => {
const calculatePdfViewportScale = (pdfPage, containerWidth, containerHeight) => { const calculatePdfViewportScale = (pdfPage, containerWidth, containerHeight) => {
try { try {
debugger
const originalViewport = pdfPage.getViewport({ scale: 1.0 }); const originalViewport = pdfPage.getViewport({ scale: 1.0 });
const viewportWidth = originalViewport.viewBox[2]; const viewportWidth = originalViewport.viewBox[2];
const viewportHeight = originalViewport.viewBox[3]; const viewportHeight = originalViewport.viewBox[3];
...@@ -274,7 +283,6 @@ const calculatePdfViewportScale = (pdfPage, containerWidth, containerHeight) => ...@@ -274,7 +283,6 @@ const calculatePdfViewportScale = (pdfPage, containerWidth, containerHeight) =>
// 验证 scale 值 // 验证 scale 值
if (isNaN(scale) || scale <= 0) { if (isNaN(scale) || scale <= 0) {
console.error(`PDF viewport scale 计算错误: ${scale}`);
return null; return null;
} }
...@@ -1027,10 +1035,11 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => { ...@@ -1027,10 +1035,11 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => {
let pageNum = pageIndex + 1; let pageNum = pageIndex + 1;
const pageInfo = getPageInfoByPageNum(pageNum);
// 检查页面是否已经渲染过 // 检查页面是否已经渲染过
if (renderedPages.value.has(pageIndex)) { if (renderedPages.value.has(pageIndex)) {
if (forceCheck) { if (forceCheck) {
const pageInfo = getPageInfoByPageNum(pageNum);
if (!pageInfo) { if (!pageInfo) {
console.warn(`页面${pageNum}信息获取失败,跳过scale检查`); console.warn(`页面${pageNum}信息获取失败,跳过scale检查`);
return; return;
...@@ -1049,14 +1058,23 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => { ...@@ -1049,14 +1058,23 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => {
console.log(`开始渲染PDF页面 ${pageNum},使用PdfViewer`); console.log(`开始渲染PDF页面 ${pageNum},使用PdfViewer`);
try { try {
// 获取页面容器 // 获取页面容器
const pageContainer = magazine.value.querySelector(`.p${pageNum}`); const pageContainer = magazine.value.querySelector(`.p${pageNum}`);
if (!pageContainer) { if (!pageContainer) {
console.warn(`Page container not found for page ${pageNum}`); console.warn(`Page container not found for page ${pageNum}`);
return; return;
} }
// 这里是为了读取页面尺寸,这个比较准
let pageWrapper = magazine.value.querySelector(`.turn-page-wrapper[page="${pageNum}"]`);
if (!pageWrapper) {
console.warn(`Page wrapper not found for page ${pageNum}`);
return;
}
// 清理容器内容 // 清理容器内容
pageContainer.innerHTML = ''; pageContainer.innerHTML = '';
...@@ -1073,9 +1091,12 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => { ...@@ -1073,9 +1091,12 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => {
// 等待DOM更新完成 // 等待DOM更新完成
await nextTick(); await nextTick();
const containerWidth = pageWrapper.clientWidth;
const containerHeight = pageWrapper.clientHeight;
// 使用封装的函数等待容器尺寸 // 使用封装的函数等待容器尺寸
const { containerWidth, containerHeight } = await waitForContainerSize(pageContainer, pageNum); // const { containerWidth, containerHeight } = await waitForContainerSize(pageContainer, pageNum);
console.log(`页面${pageNum}容器尺寸: ${containerWidth}x${containerHeight}`); // console.log(`页面${pageNum}容器尺寸: ${containerWidth}x${containerHeight}`);
// 创建PDF页面视图 // 创建PDF页面视图
const rawPdfDocument = toRaw(pdfDocument.value); const rawPdfDocument = toRaw(pdfDocument.value);
...@@ -1253,8 +1274,6 @@ const checkAndUpdatePdfPageScale = async (pageIndex) => { ...@@ -1253,8 +1274,6 @@ const checkAndUpdatePdfPageScale = async (pageIndex) => {
const getPageInfoByPageNum = (pageNum) => { const getPageInfoByPageNum = (pageNum) => {
try { try {
// 首先尝试查找翻页容器,这个容器时动态计算的 // 首先尝试查找翻页容器,这个容器时动态计算的
debugger
let pageContainer = magazine.value.querySelector(`.turn-page-wrapper[page="${pageNum}"]`); let pageContainer = magazine.value.querySelector(`.turn-page-wrapper[page="${pageNum}"]`);
// 检查容器尺寸 // 检查容器尺寸
...@@ -1402,7 +1421,6 @@ const previousPage = () => { ...@@ -1402,7 +1421,6 @@ const previousPage = () => {
const toFirst = () => { const toFirst = () => {
const firstPage = props.pages[0].page_num; const firstPage = props.pages[0].page_num;
goToPage(firstPage);
}; };
const toEnd = () => { const toEnd = () => {
...@@ -1422,6 +1440,8 @@ const zoomOut = () => { ...@@ -1422,6 +1440,8 @@ const zoomOut = () => {
// 提取公共的缩放更新逻辑 // 提取公共的缩放更新逻辑
const updateZoomCommon = async (isResize = false) => { const updateZoomCommon = async (isResize = false) => {
debugger
if (!magazine.value || !isInitialized.value) return; if (!magazine.value || !isInitialized.value) return;
const $magazine = $(magazine.value); const $magazine = $(magazine.value);
...@@ -1439,38 +1459,30 @@ const updateZoomCommon = async (isResize = false) => { ...@@ -1439,38 +1459,30 @@ const updateZoomCommon = async (isResize = false) => {
updatePageDimensions(dimensions, $magazine); updatePageDimensions(dimensions, $magazine);
// 如果是resize操作,调用turn.js的resize方法重新计算布局
if (isResize) {
$magazine.turn("resize");
// 等待DOM更新完成后再处理PDF页面 // 等待DOM更新完成后再处理PDF页面
await nextTick(); await nextTick();
}
// 使用封装的函数获取可见页面信息 // 使用封装的函数获取可见页面信息
if (processedPages.value.length > 0) { // if (processedPages.value.length > 0) {
const visiblePages = getVisiblePageInfo($magazine, processedPages); // const visiblePages = getVisiblePageInfo($magazine, processedPages);
restoreLoadedImages(visiblePages, $magazine); // restoreLoadedImages(visiblePages, $magazine);
} // }
// 处理PDF页面缩放 - 在magazine尺寸更新后重新计算scale // 处理PDF页面缩放 - 在magazine尺寸更新后重新计算scale
if (props.isPdf && pdfInitialized.value) { if (props.isPdf && pdfInitialized.value) {
if (isResize) {
console.log("Resize时重新调整PDF页面尺寸和scale");
await resizeVisiblePdfPages();
} else {
console.log("Zoom时重新调整PDF页面尺寸和scale");
await resizeVisiblePdfPages(); await resizeVisiblePdfPages();
} }
}
updateViewportStyles(); // updateViewportStyles();
} catch (error) { } catch (error) {
console.error("Error updating zoom:", error); console.error("Error updating zoom:", error);
} }
}; };
const updateZoom = () => { const updateZoom = () => {
updateZoomCommon(false); updateZoomCommon(true);
}; };
const handleResize = async () => { const handleResize = async () => {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论