Skip to content

P
pic-reader
提交 3ac2a8ee authored 作者: gzcnkilys_admin's avatar gzcnkilys_admin
浏览文件
操作

1、增加resize放大缩小处理。

上级 a29140d1
显示空白字符变更
内嵌 并排
正在显示 包含 246 行增加 和 60 行删除
src/components/BookReader/index.vue
浏览文件 @ 3ac2a8ee
......@@ -262,6 +262,8 @@ const restoreLoadedImages = (visiblePages, $magazine) => {
// 新增：封装 PDF viewport 尺寸计算
const calculatePdfViewportScale = (pdfPage, containerWidth, containerHeight) => {
try {
debugger
const originalViewport = pdfPage.getViewport({ scale: 1.0 });
const viewportWidth = originalViewport.viewBox[2];
const viewportHeight = originalViewport.viewBox[3];
......@@ -860,6 +862,12 @@ const initBook = async () => {
loading.value = false;
initialLoading.value = false;
// 确认turn.js事件绑定状态
console.log('turn.js初始化完成，事件绑定状态:');
console.log('- turning事件:', $magazine.data('turn')?.when?.turning ? '已绑定' : '未绑定');
console.log('- turned事件:', $magazine.data('turn')?.when?.turned ? '已绑定' : '未绑定');
console.log('- 当前页码:', $magazine.turn("page"));
// 只处理图片页面，PDF页面在loadPdf中处理
if (!props.isPdf) {
await loadVisiblePages(1);
......@@ -893,8 +901,13 @@ const loadPdf = async () => {
}
// 防止重复加载
if (pdfLoading.value || pdfDocument.value) {
console.log("PDF 正在加载中或已加载，跳过重复加载");
if (pdfLoading.value) {
console.log("PDF 正在加载中，跳过重复加载");
return;
}
if (pdfDocument.value && pdfInitialized.value) {
console.log("PDF 已经加载并初始化完成，跳过重复加载");
return;
}
......@@ -950,6 +963,15 @@ const loadPdf = async () => {
// 等待一小段时间，确保turn.js事件处理完成
await new Promise((resolve) => setTimeout(resolve, 100));
// 确认PDF模式下的turn.js事件绑定状态
if (magazine.value) {
const $magazine = $(magazine.value);
console.log('PDF加载完成，turn.js事件绑定状态:');
console.log('- turning事件:', $magazine.data('turn')?.when?.turning ? '已绑定' : '未绑定');
console.log('- turned事件:', $magazine.data('turn')?.when?.turned ? '已绑定' : '未绑定');
console.log('- 当前页码:', $magazine.turn("page"));
}
console.log("PDF渲染完成");
} catch (error) {
console.error("PDF加载失败:", error);
......@@ -975,7 +997,8 @@ watch(
() => props.pdfUrl,
async (newUrl, oldUrl) => {
// 避免在组件初始化时重复加载
if (newUrl && props.isPdf && newUrl !== oldUrl) {
// 只有在URL真正变化且不是从undefined到有值时才重新加载
if (newUrl && props.isPdf && oldUrl && newUrl !== oldUrl) {
console.log("PDF URL 变化，重新加载:", newUrl);
await loadPdf();
}
......@@ -999,16 +1022,30 @@ const destroyTurn = () => {
// 初始化 Intersection Observer
// 渲染单个PDF页面 - 使用PdfViewer的PDFPageView
const renderPdfPage = async (pageIndex) => {
const renderPdfPage = async (pageIndex, forceCheck = true) => {
if (!pdfDocument.value || !magazine.value) return;
let pageNum = pageIndex + 1;
// 检查页面是否已经渲染过
if (renderedPages.value.has(pageIndex)) {
if (forceCheck) {
const pageInfo = getPageInfoByPageNum(pageNum);
if (!pageInfo) {
console.warn(`页面${pageNum}信息获取失败，跳过scale检查`);
return;
}
const { scaleInfo } = pageInfo;
console.log(`页面 ${pageNum} 已经渲染过，但需要检查scale是否需要调整`);
// 在forceCheck模式下，检查已渲染页面的scale
await checkAndUpdatePdfPageScale(pageIndex);
return;
} else {
console.log(`页面 ${pageNum} 已经渲染过，跳过`);
return;
}
}
console.log(`开始渲染PDF页面 ${pageNum}，使用PdfViewer`);
......@@ -1025,6 +1062,7 @@ const renderPdfPage = async (pageIndex) => {
// 创建页面div元素
// todo 这里可能能够优化一下
debugger
const pageDiv = document.createElement('div');
pageDiv.className = 'pdfViewer';
pageDiv.setAttribute('data-page-number', pageNum);
......@@ -1099,44 +1137,178 @@ const renderPdfPage = async (pageIndex) => {
}
};
// 重新调整PDF页面尺寸
// 重新调整PDF页面尺寸
const resizePdfPage = async (pageIndex) => {
if (!pdfViewerInstances.value.has(pageIndex)) return;
// 检查并更新PDF页面的scale
const checkAndUpdatePdfPageScale = async (pageIndex) => {
if (!pdfViewerInstances.value.has(pageIndex)) return false;
const pageNum = pageIndex + 1;
const pageContainer = magazine.value.querySelector(`.p${pageNum}`);
if (!pageContainer) return;
const pageInfo = getPageInfoByPageNum(pageNum);
if (!pageInfo) {
console.warn(`页面${pageIndex + 1}信息获取失败，跳过scale检查`);
return false;
}
const pageView = pdfViewerInstances.value.get(pageIndex);
if (!pageView) return;
const { pageContainer, pageView, scaleInfo } = pageInfo;
const newScale = scaleInfo.compensatedScale;
try {
// 获取当前scale值
let currentScale = newScale; // 默认值
console.log(`before pageView: ${pageView}`);
if (pageView.viewport && typeof pageView.viewport.scale === 'number') {
currentScale = pageView.viewport.scale;
console.log(`从pageView.viewport.scale获取当前scale: ${currentScale}`);
} else {
console.warn(`页面${pageNum} viewport.scale无效，使用新计算的scale`);
}
debugger
const scaleDifference = Math.abs(currentScale - newScale);
const scaleThreshold = 0.01; // 允许的scale差异阈值
console.log(`页面${pageNum} scale检查: 当前=${currentScale}, 新计算=${newScale}, 差异=${scaleDifference}, 阈值=${scaleThreshold}`);
if (scaleDifference > scaleThreshold) {
console.log(`页面${pageNum} scale不一致，需要重新创建PDFPageView，差异: ${scaleDifference}`);
// 销毁旧的PDFPageView实例
if (pageView && typeof pageView.destroy === 'function') {
pageView.destroy();
}
// 清除渲染状态
renderedPages.value.delete(pageIndex);
pdfViewerInstances.value.delete(pageIndex);
// 找到原来的pdfViewer div并清空内容
const existingPdfDiv = pageContainer.querySelector(`.pdfViewer[data-page-number="${pageNum}"]`);
if (existingPdfDiv) {
// 直接清空现有div的内容，而不是重新创建
existingPdfDiv.innerHTML = '';
console.log(`找到现有pdfViewer div (页面${pageNum})，已清空内容`);
} else {
console.warn(`未找到页面${pageNum}的pdfViewer div，创建新的`);
// 如果没有找到，才创建新的
const pageDiv = document.createElement('div');
pageDiv.className = 'pdfViewer';
pageDiv.setAttribute('data-page-number', pageNum);
pageContainer.appendChild(pageDiv);
}
// 等待DOM更新完成
await nextTick();
// 获取PDF页面和视口
const rawPdfDocument = toRaw(pdfDocument.value);
const pdfPage = await rawPdfDocument.getPage(pageNum);
// 获取新的容器尺寸
const containerWidth = pageContainer.clientWidth;
const containerHeight = pageContainer.clientHeight;
if (containerWidth === 0 || containerHeight === 0) return;
// 使用封装的函数计算缩放比例
const scaleInfo = calculatePdfViewportScale(pdfPage, containerWidth, containerHeight);
if (!scaleInfo) {
console.error(`页面${pageNum} scale检查时重新计算scale失败`);
return false;
}
debugger
// 使用补偿后的 scale 创建 viewport
const newViewport = pdfPage.getViewport(scaleInfo.compensatedScale);
console.log(`重新调整页面${pageNum}尺寸: ${containerWidth}x${containerHeight}`);
// 使用现有的或新创建的div
const targetDiv = existingPdfDiv || pageContainer.querySelector('.pdfViewer');
// 获取PDF页面和视口
// 使用封装的函数创建新的 PDFPageView
const newPageView = createPdfPageView(targetDiv, pageNum, scaleInfo.compensatedScale, newViewport, eventBus);
// 设置PDF页面
newPageView.setPdfPage(pdfPage);
// 存储新的页面视图实例
pdfViewerInstances.value.set(pageIndex, newPageView);
// 渲染页面
await newPageView.draw();
// 重新标记页面已渲染
renderedPages.value.add(pageIndex);
console.log(`页面${pageNum} PDFPageView重新创建完成，新scale: ${scaleInfo.compensatedScale}`);
return true;
} else {
console.log(`页面${pageNum} scale一致，无需刷新`);
return false;
}
} catch (error) {
console.error(`检查页面${pageNum} scale失败:`, error);
return false;
}
};
const getPageInfoByPageNum = (pageNum) => {
try {
// 首先尝试查找翻页容器，这个容器时动态计算的
debugger
let pageContainer = magazine.value.querySelector(`.turn-page-wrapper[page="${pageNum}"]`);
// 检查容器尺寸
const clientWidth = pageContainer.clientWidth;
const clientHeight = pageContainer.clientHeight;
if (clientWidth === 0 || clientHeight === 0) {
console.warn(`页面${pageNum}容器尺寸为0: ${clientWidth}x${clientHeight}`);
return null;
}
// 获取页面视图实例
const pageIndex = pageNum - 1;
const pageView = pdfViewerInstances.value.get(pageIndex);
if (!pageView) {
console.warn(`页面${pageNum}的PDFPageView实例未找到`);
return null;
}
// 获取PDF页面对象
const pdfPage = pageView.pdfPage;
if (!pdfPage) {
console.warn(`页面${pageNum}的PDF页面对象未找到`);
return null;
}
// 使用封装的函数计算缩放比例
const scaleInfo = calculatePdfViewportScale(pdfPage, containerWidth, containerHeight);
// 计算缩放比例
const scaleInfo = calculatePdfViewportScale(pdfPage, clientWidth, clientHeight);
if (!scaleInfo) {
console.error(`页面${pageNum} resize scale 计算失败`);
return;
console.warn(`页面${pageNum} scale计算失败`);
return null;
}
return {
pageContainer,
pageView,
scaleInfo
};
} catch (error) {
console.error(`获取页面${pageNum}信息时出错:`, error);
return null;
}
}
console.log(`页面${pageNum}尺寸调整完成，新缩放比例: ${scaleInfo.scale}`);
// 重新调整PDF页面尺寸
const resizePdfPage = async (pageIndex) => {
if (!pdfViewerInstances.value.has(pageIndex)) return;
// 更新 pageView 的缩放
pageView.update(scaleInfo.compensatedScale);
const pageNum = pageIndex + 1;
// 重新渲染页面
await pageView.draw();
try {
// 使用通用的scale检查函数
await checkAndUpdatePdfPageScale(pageIndex);
console.log(`页面${pageNum} resize 完成`);
......@@ -1145,7 +1317,6 @@ const resizePdfPage = async (pageIndex) => {
}
};
// 批量重新调整所有可见PDF页面尺寸
// 批量重新调整所有可见PDF页面尺寸
const resizeVisiblePdfPages = async () => {
if (!magazine.value || !isInitialized.value) return;
......@@ -1160,9 +1331,17 @@ const resizeVisiblePdfPages = async () => {
// 使用封装的函数获取可见页面索引
const visiblePages = getVisiblePageIndexes(currentPage, totalPages, isMobile.value);
// 重新调整可见页面的尺寸
console.log(`开始检查可见页面: ${visiblePages.map(i => i + 1).join(', ')}`);
// 对所有可见页面进行检查和调整
for (const pageIndex of visiblePages) {
if (renderedPages.value.has(pageIndex)) {
// 已渲染的页面，检查scale是否需要调整
console.log(`检查已渲染页面 ${pageIndex + 1} 的scale`);
await resizePdfPage(pageIndex); // 使用resizePdfPage来检查已渲染页面的scale
} else {
// 未渲染的页面，重新调整尺寸
console.log(`调整未渲染页面 ${pageIndex + 1} 的尺寸`);
await resizePdfPage(pageIndex);
}
}
......@@ -1241,7 +1420,8 @@ const zoomOut = () => {
updateZoom();
};
const updateZoom = () => {
// 提取公共的缩放更新逻辑
const updateZoomCommon = async (isResize = false) => {
if (!magazine.value || !isInitialized.value) return;
const $magazine = $(magazine.value);
......@@ -1259,31 +1439,12 @@ const updateZoom = () => {
updatePageDimensions(dimensions, $magazine);
// 使用封装的函数获取可见页面信息
if (processedPages.value.length > 0) {
const visiblePages = getVisiblePageInfo($magazine, processedPages);
restoreLoadedImages(visiblePages, $magazine);
}
updateViewportStyles();
} catch (error) {
console.error("Error updating zoom:", error);
}
};
const handleResize = async () => {
try {
const $magazine = $(magazine.value);
if (!$magazine.length) return;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const dimensions = calculatePageDimensions(viewportWidth, viewportHeight, zoomLevel.value);
if (!dimensions) return;
updatePageDimensions(dimensions, $magazine);
// 如果是resize操作，调用turn.js的resize方法重新计算布局
if (isResize) {
$magazine.turn("resize");
// 等待DOM更新完成后再处理PDF页面
await nextTick();
}
// 使用封装的函数获取可见页面信息
if (processedPages.value.length > 0) {
......@@ -1291,17 +1452,31 @@ const handleResize = async () => {
restoreLoadedImages(visiblePages, $magazine);
}
// 处理PDF页面缩放 - 在magazine尺寸更新后重新计算scale
if (props.isPdf && pdfInitialized.value) {
console.log("Resize时重新调整PDF页面尺寸");
if (isResize) {
console.log("Resize时重新调整PDF页面尺寸和scale");
await resizeVisiblePdfPages();
} else {
console.log("Zoom时重新调整PDF页面尺寸和scale");
await resizeVisiblePdfPages();
}
}
updateViewportStyles();
} catch (error) {
console.error("Error handling resize:", error);
console.error("Error updating zoom:", error);
}
};
const updateZoom = () => {
updateZoomCommon(false);
};
const handleResize = async () => {
await updateZoomCommon(true);
};
const handleKeyDown = (e) => {
switch (e.key) {
case "ArrowRight":
......@@ -1511,12 +1686,6 @@ const debugPageStatus = () => {
// 添加防抖处理
let resizeTimeout;
window.addEventListener("resize", () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
handleResize();
}, 250);
});
onMounted(async () => {
// 先加载PDF.js
......@@ -1550,16 +1719,33 @@ onMounted(async () => {
// 根据类型选择加载方式
if (props.isPdf && props.pdfUrl) {
console.log('组件挂载时加载PDF:', props.pdfUrl);
await loadPdf();
} else if (props.pages && props.pages.length > 0) {
console.log('组件挂载时加载图片');
await loadImages();
} else {
console.log('组件挂载时无需加载内容');
}
initAudio();
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("resize", handleResize);
// 添加防抖的resize监听器
console.log('绑定resize事件监听器');
window.addEventListener("resize", () => {
console.log('resize事件触发');
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(() => {
console.log('调用handleResize');
handleResize();
}, 250);
});
// Load directory images
loadDirectoryImages();
console.log('onMounted完成，事件绑定完成');
});
onUnmounted(() => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论