Skip to content

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

feat:封装优化代码

上级 4f7bfcda
显示空白字符变更
内嵌 并排
正在显示 包含 295 行增加 和 332 行删除
src/components/BookReader/index.vue
浏览文件 @ a29140d1
...@@ -147,52 +147,7 @@ ...@@ -147,52 +147,7 @@
<svg-icon name="to-end" :size="30" @click="toEnd"></svg-icon> <svg-icon name="to-end" :size="30" @click="toEnd"></svg-icon>
</el-tooltip> </el-tooltip>
</el-col> </el-col>
<el-col class="right" :span="8">
<!-- PDF文字层开关 -->
<el-tooltip
v-if="props.isPdf"
:content="textLayerEnabled ? '关闭文字层' : '开启文字层'"
placement="top"
effect="dark"
>
<svg-icon
:name="textLayerEnabled ? 'list' : 'menu'"
:size="20"
@click="toggleTextLayer"
></svg-icon>
</el-tooltip>
<!-- PDF渲染模式切换 -->
<el-tooltip
v-if="props.isPdf && textLayerEnabled"
:content="svgRendererEnabled ? '切换到Canvas模式' : '切换到SVG模式'"
placement="top"
effect="dark"
>
<svg-icon
:name="svgRendererEnabled ? 'zoom-out' : 'zoom-in'"
:size="20"
@click="toggleRenderer"
></svg-icon>
</el-tooltip>
<!-- 文本层调试开关 -->
<el-tooltip
v-if="props.isPdf && textLayerEnabled"
:content="textLayerVisible ? '隐藏文本层' : '显示文本层'"
placement="top"
effect="dark"
>
<svg-icon
:name="textLayerVisible ? 'hign' : 'note'"
:size="20"
@click="toggleTextLayerVisibility"
></svg-icon>
</el-tooltip>
<!-- <svg-icon name="download" size="20"></svg-icon> -->
<!-- <svg-icon name="fullscreen" size="20"></svg-icon> -->
</el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
...@@ -213,6 +168,210 @@ import VueEasyLightbox from "vue-easy-lightbox"; ...@@ -213,6 +168,210 @@ import VueEasyLightbox from "vue-easy-lightbox";
import GuideMobile from "../GuideMobile/index.vue"; import GuideMobile from "../GuideMobile/index.vue";
import audioFlip from "@/assets/audio/flip.mp3"; import audioFlip from "@/assets/audio/flip.mp3";
import throttle from "lodash/throttle"; import throttle from "lodash/throttle";
// 常量定义
const PDF_RATIO = 1.414; // PDF标准比例 1:√2 (高度是宽度的1.414倍)
// 响应式变量
const baseWidth = ref(0);
const baseHeight = ref(0);
// 封装的通用函数
// 计算页面尺寸
const calculatePageDimensions = (viewportWidth, viewportHeight, zoom = 1.0) => {
try {
// 计算基于宽度的最大尺寸
const maxWidth = viewportWidth / 2 - 50;
const maxHeightByWidth = maxWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
// 计算基于高度的最大尺寸
const maxHeight = viewportHeight - 100;
const maxWidthByHeight = maxHeight / PDF_RATIO; // 宽度 = 高度 ÷ 1.414
let baseWidth, baseHeight;
// 选择能撑满一边的方案
if (maxHeightByWidth <= maxHeight) {
// 宽度能撑满，高度也满足
baseWidth = maxWidth;
baseHeight = maxHeightByWidth;
} else {
// 高度能撑满，宽度也满足
baseWidth = maxWidthByHeight;
baseHeight = maxHeight;
}
// 确保不超过移动端的限制
if (isMobile.value) {
baseWidth = Math.min(baseWidth, viewportWidth - 20);
baseHeight = baseWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
}
// 应用缩放
const scaledWidth = baseWidth * zoom;
const scaledHeight = baseHeight * zoom;
return {
baseWidth,
baseHeight,
scaledWidth,
scaledHeight
};
} catch (error) {
console.error("Error calculating page dimensions:", error);
return null;
}
};
// 更新页面尺寸
const updatePageDimensions = (dimensions, $magazine) => {
// 直接更新 turn.js 尺寸
$magazine.turn("size", dimensions.scaledWidth * 2, dimensions.scaledHeight);
// 更新页面尺寸
$magazine.children().each(function () {
const $page = $(this);
$page.css({
width: dimensions.scaledWidth,
height: dimensions.scaledHeight,
});
});
};
// 更新视口样式
const updateViewportStyles = () => {
const $viewport = $(".magazine-viewport");
$viewport.css({
width: "100%",
height: "100%",
overflow: "auto",
});
};
// 恢复已加载的图片
const restoreLoadedImages = (visiblePages, $magazine) => {
visiblePages.forEach((page) => {
const $page = $magazine.find(`.p${page.page}`);
const $img = $page.find("img");
if ($img.length && page.isLoaded) {
$img[0].src = page.src;
}
});
};
// 新增：封装 PDF viewport 尺寸计算
const calculatePdfViewportScale = (pdfPage, containerWidth, containerHeight) => {
try {
const originalViewport = pdfPage.getViewport({ scale: 1.0 });
const viewportWidth = originalViewport.viewBox[2];
const viewportHeight = originalViewport.viewBox[3];
const scaleX = containerWidth / viewportWidth;
const scaleY = containerHeight / viewportHeight;
const scale = Math.min(scaleX, scaleY); // 保持比例
// 验证 scale 值
if (isNaN(scale) || scale <= 0) {
console.error(`PDF viewport scale 计算错误: ${scale}`);
return null;
}
// 计算补偿后的 scale
const cssUnits = pdfjsViewer.CSS_UNITS || (96.0 / 72.0);
const compensatedScale = scale / cssUnits;
return {
scale,
compensatedScale,
viewportWidth,
viewportHeight
};
} catch (error) {
console.error("计算 PDF viewport scale 失败:", error);
return null;
}
};
// 新增：封装获取可见页面索引
const getVisiblePageIndexes = (currentPage, totalPages, isMobile) => {
const visiblePages = [];
if (isMobile) {
// 移动端只显示当前页
visiblePages.push(currentPage - 1);
} else {
// 桌面端显示当前页和下一页
visiblePages.push(currentPage - 1);
if (currentPage < totalPages) {
visiblePages.push(currentPage);
}
}
return visiblePages;
};
// 新增：封装获取可见页面信息（用于图片恢复）
const getVisiblePageInfo = ($magazine, processedPages) => {
if (!processedPages.value.length) return [];
const currentPage = $magazine.turn("page");
const visibleIndexes = getVisiblePageIndexes(currentPage, processedPages.value.length, isMobile.value);
return visibleIndexes.map(index => ({
page: index + 1,
isLoaded: processedPages.value[index]?.isLoaded || false
}));
};
// 新增：封装创建 PDFPageView
const createPdfPageView = (pageDiv, pageNum, compensatedScale, newViewport, eventBus) => {
if (!pdfjsViewer) {
throw new Error('PDF.js viewer not loaded');
}
return new pdfjsViewer.PDFPageView({
container: pageDiv,
id: pageNum - 1,
scale: compensatedScale,
defaultViewport: newViewport,
eventBus: toRaw(eventBus.value),
textLayerMode: textLayerEnabled.value ? 1 : 0,
annotationMode: 0,
renderInteractiveForms: false,
renderer: svgRendererEnabled.value ? "svg" : "canvas",
enableXfa: false,
l10n: null,
textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory(),
useOnlyCssZoom: false
});
};
// 新增：封装 PDF 页面容器尺寸等待逻辑
const waitForContainerSize = async (pageContainer, pageNum) => {
let containerWidth = pageContainer.clientWidth;
let containerHeight = pageContainer.clientHeight;
// 如果容器尺寸为0，等待turn.js完全初始化
if (containerWidth === 0 || containerHeight === 0) {
console.log(`页面${pageNum}容器尺寸为0，等待turn.js初始化...`);
await new Promise((resolve) => {
const checkSize = () => {
const width = pageContainer.clientWidth;
const height = pageContainer.clientHeight;
if (width > 0 && height > 0) {
containerWidth = width;
containerHeight = height;
resolve();
} else {
setTimeout(checkSize, 50);
}
};
checkSize();
});
}
return { containerWidth, containerHeight };
};
// PDF.js 相关变量声明 // PDF.js 相关变量声明
let pdfjsLib = null; let pdfjsLib = null;
let pdfjsViewer = null; let pdfjsViewer = null;
...@@ -579,38 +738,19 @@ const initBook = async () => { ...@@ -579,38 +738,19 @@ const initBook = async () => {
const viewportWidth = window.innerWidth; const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight; const viewportHeight = window.innerHeight;
// 计算容器能容纳的最大尺寸，保持PDF的1:√2比例 // 使用封装的函数计算页面尺寸
const PDF_RATIO = 1.414; // PDF标准比例 1:√2 (高度是宽度的1.414倍) const dimensions = calculatePageDimensions(viewportWidth, viewportHeight, 1.0);
if (!dimensions) {
// 计算基于宽度的最大尺寸 console.error("计算页面尺寸失败");
const maxWidth = viewportWidth / 2 - 50; return;
const maxHeightByWidth = maxWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
// 计算基于高度的最大尺寸
const maxHeight = viewportHeight - 100;
const maxWidthByHeight = maxHeight / PDF_RATIO; // 宽度 = 高度 ÷ 1.414
let pageWidth, pageHeight;
// 选择能撑满一边的方案
if (maxHeightByWidth <= maxHeight) {
// 宽度能撑满，高度也满足
pageWidth = maxWidth;
pageHeight = maxHeightByWidth;
console.log(`选择宽度撑满方案: 宽度=${pageWidth}, 高度=${pageHeight}`);
} else {
// 高度能撑满，宽度也满足
pageWidth = maxWidthByHeight;
pageHeight = maxHeight;
console.log(`选择高度撑满方案: 宽度=${pageWidth}, 高度=${pageHeight}`);
} }
// 确保不超过移动端的限制 // 更新响应式变量
if (isMobile.value) { baseWidth.value = dimensions.baseWidth;
pageWidth = Math.min(pageWidth, viewportWidth - 20); baseHeight.value = dimensions.baseHeight;
pageHeight = pageWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
console.log(`移动端调整后: 宽度=${pageWidth}, 高度=${pageHeight}`); const pageWidth = dimensions.baseWidth;
} const pageHeight = dimensions.baseHeight;
// 添加调试信息 // 添加调试信息
console.log(`视口尺寸: ${viewportWidth}x${viewportHeight}`); console.log(`视口尺寸: ${viewportWidth}x${viewportHeight}`);
...@@ -752,6 +892,12 @@ const loadPdf = async () => { ...@@ -752,6 +892,12 @@ const loadPdf = async () => {
return; return;
} }
// 防止重复加载
if (pdfLoading.value || pdfDocument.value) {
console.log("PDF 正在加载中或已加载，跳过重复加载");
return;
}
try { try {
pdfLoading.value = true; pdfLoading.value = true;
console.log("开始加载PDF:", props.pdfUrl); console.log("开始加载PDF:", props.pdfUrl);
...@@ -814,8 +960,9 @@ const loadPdf = async () => { ...@@ -814,8 +960,9 @@ const loadPdf = async () => {
// 监听 props.pages 的变化 // 监听 props.pages 的变化
watch( watch(
() => props.pages, () => props.pages,
(newPages) => { (newPages, oldPages) => {
if (newPages && newPages.length > 0 && !props.isPdf) { // 避免在组件初始化时重复加载
if (newPages && newPages.length > 0 && !props.isPdf && newPages !== oldPages) {
processedPages.value = processPages(newPages); processedPages.value = processPages(newPages);
loadImages(); loadImages();
} }
...@@ -826,8 +973,9 @@ watch( ...@@ -826,8 +973,9 @@ watch(
// 监听PDF URL的变化 // 监听PDF URL的变化
watch( watch(
() => props.pdfUrl, () => props.pdfUrl,
async (newUrl) => { async (newUrl, oldUrl) => {
if (newUrl && props.isPdf) { // 避免在组件初始化时重复加载
if (newUrl && props.isPdf && newUrl !== oldUrl) {
console.log("PDF URL 变化，重新加载:", newUrl); console.log("PDF URL 变化，重新加载:", newUrl);
await loadPdf(); await loadPdf();
} }
...@@ -887,72 +1035,26 @@ const renderPdfPage = async (pageIndex) => { ...@@ -887,72 +1035,26 @@ const renderPdfPage = async (pageIndex) => {
// 等待DOM更新完成 // 等待DOM更新完成
await nextTick(); await nextTick();
// 获取容器实际尺寸 - 使用更可靠的方法 // 使用封装的函数等待容器尺寸
let containerWidth = pageContainer.clientWidth; const { containerWidth, containerHeight } = await waitForContainerSize(pageContainer, pageNum);
let containerHeight = pageContainer.clientHeight;
// 如果容器尺寸为0，等待turn.js完全初始化
if (containerWidth === 0 || containerHeight === 0) {
console.log(`页面${pageNum}容器尺寸为0，等待turn.js初始化...`);
// 等待turn.js完成页面布局
await new Promise((resolve) => {
const checkSize = () => {
const width = pageContainer.clientWidth;
const height = pageContainer.clientHeight;
if (width > 0 && height > 0) {
containerWidth = width;
containerHeight = height;
resolve();
} else {
setTimeout(checkSize, 50);
}
};
checkSize();
});
}
console.log(`页面${pageNum}容器尺寸: ${containerWidth}x${containerHeight}`); console.log(`页面${pageNum}容器尺寸: ${containerWidth}x${containerHeight}`);
// 创建PDF页面视图 // 创建PDF页面视图
const rawPdfDocument = toRaw(pdfDocument.value); const rawPdfDocument = toRaw(pdfDocument.value);
const pdfPage = await rawPdfDocument.getPage(pageNum); const pdfPage = await rawPdfDocument.getPage(pageNum);
// 先计算缩放比例 // 使用封装的函数计算缩放比例
const originalViewport = pdfPage.getViewport({ scale: 1.0 }); const scaleInfo = calculatePdfViewportScale(pdfPage, containerWidth, containerHeight);
const viewportWidth = originalViewport.viewBox[2]; if (!scaleInfo) {
const viewportHeight = originalViewport.viewBox[3]; console.error(`页面${pageNum} scale 计算失败`);
const scaleX = containerWidth / viewportWidth; return;
const scaleY = containerHeight / viewportHeight; }
const scale = Math.max(scaleX, scaleY);
const cssUnits = pdfjsViewer.CSS_UNITS || (96.0 / 72.0);
// 计算补偿后的 scale // 使用补偿后的 scale 创建 viewport
const compensatedScale = scale / cssUnits; const newViewport = pdfPage.getViewport(scaleInfo.compensatedScale);
// 3. 重新创建 viewport 和 pageView // 使用封装的函数创建 PDFPageView
const newViewport = pdfPage.getViewport(scale); const pageView = createPdfPageView(pageDiv, pageNum, scaleInfo.compensatedScale, newViewport, eventBus);
// 创建PDFPageView实例
if (!pdfjsViewer) {
throw new Error('PDF.js viewer not loaded');
}
const pageView = new pdfjsViewer.PDFPageView({
container: pageDiv,
id: pageNum - 1,
scale: compensatedScale, // 使用1.0，因为我们已经通过scaledViewport处理了缩放
defaultViewport: newViewport,
eventBus: toRaw(eventBus.value),
textLayerMode: 1, // 根据开关状态设置
annotationMode: 0, // 1=ENABLE
renderInteractiveForms: false,
renderer: "canvas",
enableXfa: false,
l10n: null,
textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory(),
useOnlyCssZoom: false // 添加这一行
});
// 设置PDF页面 // 设置PDF页面
pageView.setPdfPage(pdfPage); pageView.setPdfPage(pdfPage);
...@@ -997,6 +1099,7 @@ const renderPdfPage = async (pageIndex) => { ...@@ -997,6 +1099,7 @@ const renderPdfPage = async (pageIndex) => {
} }
}; };
// 重新调整PDF页面尺寸
// 重新调整PDF页面尺寸 // 重新调整PDF页面尺寸
const resizePdfPage = async (pageIndex) => { const resizePdfPage = async (pageIndex) => {
if (!pdfViewerInstances.value.has(pageIndex)) return; if (!pdfViewerInstances.value.has(pageIndex)) return;
...@@ -1019,29 +1122,30 @@ const resizePdfPage = async (pageIndex) => { ...@@ -1019,29 +1122,30 @@ const resizePdfPage = async (pageIndex) => {
// 获取PDF页面和视口 // 获取PDF页面和视口
const pdfPage = pageView.pdfPage; const pdfPage = pageView.pdfPage;
const originalViewport = pdfPage.getViewport({ scale: 1.0 });
// 计算新的缩放比例 // 使用封装的函数计算缩放比例
const scaleX = containerWidth / originalViewport.width; const scaleInfo = calculatePdfViewportScale(pdfPage, containerWidth, containerHeight);
const scaleY = containerHeight / originalViewport.height; if (!scaleInfo) {
const newScale = Math.min(scaleX, scaleY); console.error(`页面${pageNum} resize scale 计算失败`);
return;
}
// 创建新的缩放视口 console.log(`页面${pageNum}尺寸调整完成，新缩放比例: ${scaleInfo.scale}`);
const newScaledViewport = pdfPage.getViewport({ scale: newScale });
// 更新页面视图的视口和缩放比例 // 更新 pageView 的缩放
pageView.update(1.0, newScaledViewport); pageView.update(scaleInfo.compensatedScale);
// 重新渲染页面 // 重新渲染页面
await pageView.draw(); await pageView.draw();
console.log(`页面${pageNum}尺寸调整完成，新缩放比例: ${newScale}`); console.log(`页面${pageNum} resize 完成`);
} catch (error) { } catch (error) {
console.error(`调整页面${pageNum}尺寸失败:`, error); console.error(`调整页面${pageNum}尺寸失败:`, error);
} }
}; };
// 批量重新调整所有可见PDF页面尺寸
// 批量重新调整所有可见PDF页面尺寸 // 批量重新调整所有可见PDF页面尺寸
const resizeVisiblePdfPages = async () => { const resizeVisiblePdfPages = async () => {
if (!magazine.value || !isInitialized.value) return; if (!magazine.value || !isInitialized.value) return;
...@@ -1051,21 +1155,10 @@ const resizeVisiblePdfPages = async () => { ...@@ -1051,21 +1155,10 @@ const resizeVisiblePdfPages = async () => {
try { try {
const currentPage = $magazine.turn("page"); const currentPage = $magazine.turn("page");
// 使用processedPages的长度而不是turn.js的pages值
const totalPages = processedPages.value.length; const totalPages = processedPages.value.length;
// 获取当前可见的页面索引 // 使用封装的函数获取可见页面索引
const visiblePages = []; const visiblePages = getVisiblePageIndexes(currentPage, totalPages, isMobile.value);
if (isMobile.value) {
// 移动端只显示当前页
visiblePages.push(currentPage - 1);
} else {
// 桌面端显示当前页和下一页
visiblePages.push(currentPage - 1);
if (currentPage < totalPages) {
visiblePages.push(currentPage);
}
}
// 重新调整可见页面的尺寸 // 重新调整可见页面的尺寸
for (const pageIndex of visiblePages) { for (const pageIndex of visiblePages) {
...@@ -1074,6 +1167,8 @@ const resizeVisiblePdfPages = async () => { ...@@ -1074,6 +1167,8 @@ const resizeVisiblePdfPages = async () => {
} }
} }
console.log('所有可见 PDF 页面 resize 完成');
} catch (error) { } catch (error) {
console.error("重新调整PDF页面尺寸失败:", error); console.error("重新调整PDF页面尺寸失败:", error);
} }
...@@ -1147,93 +1242,63 @@ const zoomOut = () => { ...@@ -1147,93 +1242,63 @@ const zoomOut = () => {
}; };
const updateZoom = () => { const updateZoom = () => {
if (magazine.value && isInitialized.value) { if (!magazine.value || !isInitialized.value) return;
const $magazine = $(magazine.value);
const currentPage = $magazine.turn("page");
// 保存当前可见页面的图片状态
const visiblePages = [];
// 使用processedPages的长度而不是turn.js的pages值
const totalPages = processedPages.value.length;
const startPage = Math.max(1, currentPage - 2);
const endPage = Math.min(totalPages, currentPage + 2);
for (let i = startPage; i <= endPage; i++) { const $magazine = $(magazine.value);
const $page = $magazine.find(`.p${i}`); if (!$magazine.length) return;
const $img = $page.find("img");
if ($img.length) {
visiblePages.push({
page: i,
src: $img[0].src,
isLoaded: $img[0].complete,
});
}
}
// 计算容器能容纳的最大尺寸，保持PDF的1:√2比例 try {
const viewportWidth = window.innerWidth; const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight; const viewportHeight = window.innerHeight;
const PDF_RATIO = 1.414; // PDF标准比例 1:√2 (高度是宽度的1.414倍)
// 计算基于宽度的最大尺寸 const dimensions = calculatePageDimensions(viewportWidth, viewportHeight, zoomLevel.value);
const maxWidth = viewportWidth / 2 - 50; if (!dimensions) return;
const maxHeightByWidth = maxWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
// 计算基于高度的最大尺寸 baseWidth.value = dimensions.baseWidth;
const maxHeight = viewportHeight - 100; baseHeight.value = dimensions.baseHeight;
const maxWidthByHeight = maxHeight / PDF_RATIO; // 宽度 = 高度 ÷ 1.414
let baseWidth, baseHeight; updatePageDimensions(dimensions, $magazine);
// 选择能撑满一边的方案 // 使用封装的函数获取可见页面信息
if (maxHeightByWidth <= maxHeight) { if (processedPages.value.length > 0) {
// 宽度能撑满，高度也满足 const visiblePages = getVisiblePageInfo($magazine, processedPages);
baseWidth = maxWidth; restoreLoadedImages(visiblePages, $magazine);
baseHeight = maxHeightByWidth;
} else {
// 高度能撑满，宽度也满足
baseWidth = maxWidthByHeight;
baseHeight = maxHeight;
} }
// 确保不超过移动端的限制 updateViewportStyles();
if (isMobile.value) { } catch (error) {
baseWidth = Math.min(baseWidth, viewportWidth - 20); console.error("Error updating zoom:", error);
baseHeight = baseWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
} }
};
// 应用缩放 const handleResize = async () => {
const scaledWidth = baseWidth * zoomLevel.value; try {
const scaledHeight = baseHeight * zoomLevel.value; const $magazine = $(magazine.value);
if (!$magazine.length) return;
// 直接更新 turn.js 尺寸 const viewportWidth = window.innerWidth;
$magazine.turn("size", scaledWidth * 2, scaledHeight); const viewportHeight = window.innerHeight;
// 更新页面尺寸 const dimensions = calculatePageDimensions(viewportWidth, viewportHeight, zoomLevel.value);
$magazine.children().each(function () { if (!dimensions) return;
const $page = $(this);
$page.css({
width: scaledWidth,
height: scaledHeight,
});
});
// 恢复已加载的图片 updatePageDimensions(dimensions, $magazine);
visiblePages.forEach((page) => { await nextTick();
const $page = $magazine.find(`.p${page.page}`);
const $img = $page.find("img"); // 使用封装的函数获取可见页面信息
if ($img.length && page.isLoaded) { if (processedPages.value.length > 0) {
$img[0].src = page.src; const visiblePages = getVisiblePageInfo($magazine, processedPages);
restoreLoadedImages(visiblePages, $magazine);
} }
});
// 更新视口样式 if (props.isPdf && pdfInitialized.value) {
const $viewport = $(".magazine-viewport"); console.log("Resize时重新调整PDF页面尺寸");
$viewport.css({ await resizeVisiblePdfPages();
width: "100%", }
height: "100%",
overflow: "auto", updateViewportStyles();
}); } catch (error) {
console.error("Error handling resize:", error);
} }
}; };
...@@ -1254,110 +1319,8 @@ const handleKeyDown = (e) => { ...@@ -1254,110 +1319,8 @@ const handleKeyDown = (e) => {
} }
}; };
const handleResize = async () => {
if (magazine.value && isInitialized.value) {
try {
const $magazine = $(magazine.value);
const currentPage = $magazine.turn("page");
const currentZoom = zoomLevel.value;
// 保存当前可见页面的图片状态
const visiblePages = [];
// 使用processedPages的长度而不是turn.js的pages值
const totalPages = processedPages.value.length;
const startPage = Math.max(1, currentPage - 2);
const endPage = Math.min(totalPages, currentPage + 2);
for (let i = startPage; i <= endPage; i++) {
const $page = $magazine.find(`.p${i}`);
const $img = $page.find("img");
if ($img.length) {
visiblePages.push({
page: i,
src: $img[0].src,
isLoaded: $img[0].complete,
});
}
}
// 计算容器能容纳的最大尺寸，保持PDF的1:√2比例
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const PDF_RATIO = 1.414; // PDF标准比例 1:√2 (高度是宽度的1.414倍)
// 计算基于宽度的最大尺寸
const maxWidth = viewportWidth / 2 - 50;
const maxHeightByWidth = maxWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
// 计算基于高度的最大尺寸
const maxHeight = viewportHeight - 100;
const maxWidthByHeight = maxHeight / PDF_RATIO; // 宽度 = 高度 ÷ 1.414
let baseWidth, baseHeight;
// 选择能撑满一边的方案
if (maxHeightByWidth <= maxHeight) {
// 宽度能撑满，高度也满足
baseWidth = maxWidth;
baseHeight = maxHeightByWidth;
console.log(`Resize选择宽度撑满方案: 宽度=${baseWidth}, 高度=${baseHeight}`);
} else {
// 高度能撑满，宽度也满足
baseWidth = maxWidthByHeight;
baseHeight = maxHeight;
console.log(`Resize选择高度撑满方案: 宽度=${baseWidth}, 高度=${baseHeight}`);
}
// 确保不超过移动端的限制
if (isMobile.value) {
baseWidth = Math.min(baseWidth, viewportWidth - 20);
baseHeight = baseWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
console.log(`Resize移动端调整后: 宽度=${baseWidth}, 高度=${baseHeight}`);
}
// 应用缩放
const scaledWidth = baseWidth * currentZoom;
const scaledHeight = baseHeight * currentZoom;
// 直接更新 turn.js 尺寸
$magazine.turn("size", scaledWidth * 2, scaledHeight);
// 更新页面尺寸
$magazine.children().each(function () {
const $page = $(this);
$page.css({
width: scaledWidth,
height: scaledHeight,
});
});
// 恢复已加载的图片
visiblePages.forEach((page) => {
const $page = $magazine.find(`.p${page.page}`);
const $img = $page.find("img");
if ($img.length && page.isLoaded) {
$img[0].src = page.src;
}
});
// 如果是PDF模式，重新调整PDF页面尺寸
if (props.isPdf && pdfInitialized.value) {
console.log("Resize时重新调整PDF页面尺寸");
await resizeVisiblePdfPages();
}
// 更新视口样式
const $viewport = $(".magazine-viewport");
$viewport.css({
width: "100%",
height: "100%",
overflow: "auto",
});
} catch (error) {
console.error("Error handling resize:", error);
}
}
};
const initAudio = () => { const initAudio = () => {
try { try {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论