Skip to content

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

fix:修复不同比例动态计算，修复文字层的叠加问题

上级 cd5b7f87
显示空白字符变更
内嵌 并排
正在显示 包含 128 行增加 和 69 行删除
public/pdfjs-dist/web/pdf_viewer.css
浏览文件 @ 4f7bfcda
......@@ -15,11 +15,10 @@
.textLayer {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
right: auto;
bottom: auto;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
overflow: hidden;
opacity: 0.2;
line-height: 1.0;
......@@ -303,21 +302,22 @@
cursor: pointer;
}
.pdfViewer .canvasWrapper {
.pdfViewer {
overflow: hidden;
width: 100%;
height: 100%;
align-self: unset;
align-content: center;
}
.pdfViewer .canvasWrapper {
overflow: hidden;
}
.pdfViewer .page {
direction: ltr;
width: 816px;
height: 1056px;
/* margin: 1px auto -8px auto; */
position: relative;
overflow: visible;
border: 9px solid transparent;
/* border: 9px solid transparent; */
background-clip: content-box;
-o-border-image: url(images/shadow.png) 9 9 repeat;
border-image: url(images/shadow.png) 9 9 repeat;
......
src/components/BookReader/index.vue
浏览文件 @ 4f7bfcda
......@@ -579,26 +579,44 @@ const initBook = async () => {
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// 移动端使用不同的尺寸计算
// 计算容器能容纳的最大尺寸，保持PDF的1:√2比例
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 pageWidth, pageHeight;
if (isMobile.value) {
// 移动端：宽度等于设备宽度减去边距
pageWidth = viewportWidth - 20; // 左右各留10px边距
// 高度按比例计算（假设标准比例为 4:3）
pageHeight = (pageWidth * 4) / 3;
// 确保高度不超过视口高度
if (pageHeight > viewportHeight - 100) {
// 上下各留50px边距
pageHeight = viewportHeight - 92;
// 重新计算宽度以保持比例
pageWidth = (pageHeight * 3) / 4;
}
// 选择能撑满一边的方案
if (maxHeightByWidth <= maxHeight) {
// 宽度能撑满，高度也满足
pageWidth = maxWidth;
pageHeight = maxHeightByWidth;
console.log(`选择宽度撑满方案: 宽度=${pageWidth}, 高度=${pageHeight}`);
} else {
// 桌面端保持原有逻辑
pageWidth = Math.min(600, viewportWidth / 2 - 50);
pageHeight = Math.min(800, viewportHeight - 100);
// 高度能撑满，宽度也满足
pageWidth = maxWidthByHeight;
pageHeight = maxHeight;
console.log(`选择高度撑满方案: 宽度=${pageWidth}, 高度=${pageHeight}`);
}
// 确保不超过移动端的限制
if (isMobile.value) {
pageWidth = Math.min(pageWidth, viewportWidth - 20);
pageHeight = pageWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
console.log(`移动端调整后: 宽度=${pageWidth}, 高度=${pageHeight}`);
}
// 添加调试信息
console.log(`视口尺寸: ${viewportWidth}x${viewportHeight}`);
console.log(`计算出的页面尺寸: ${pageWidth}x${pageHeight}, 比例: ${(pageWidth/pageHeight).toFixed(3)}`);
console.log(`PDF标准比例: ${PDF_RATIO}, 实际比例: ${(pageWidth/pageHeight).toFixed(3)}`);
await nextTick();
try {
......@@ -644,6 +662,7 @@ const initBook = async () => {
});
// 移动端使用单页显示
console.log(`turn.js初始化参数: 宽度=${isMobile.value ? pageWidth : pageWidth * 2}, 高度=${pageHeight}`);
$magazine.turn({
width: isMobile.value ? pageWidth : pageWidth * 2,
height: pageHeight,
......@@ -859,15 +878,8 @@ const renderPdfPage = async (pageIndex) => {
// 创建页面div元素
// todo 这里可能能够优化一下
const pageDiv = document.createElement('div');
pageDiv.className = 'pdf-page-container';
pageDiv.className = 'pdfViewer';
pageDiv.setAttribute('data-page-number', pageNum);
pageDiv.style.position = 'relative';
pageDiv.style.width = '100%';
pageDiv.style.height = '100%';
pageDiv.style.overflow = 'hidden';
pageDiv.style.display = 'flex';
pageDiv.style.alignItems = 'center';
pageDiv.style.justifyContent = 'center';
// 将页面div添加到容器中
pageContainer.appendChild(pageDiv);
......@@ -902,29 +914,25 @@ const renderPdfPage = async (pageIndex) => {
console.log(`页面${pageNum}容器尺寸: ${containerWidth}x${containerHeight}`);
// 设置页面div的尺寸
// 这里可能能够优化
// pageDiv.style.width = `${containerWidth}px`;
// pageDiv.style.height = `${containerHeight}px`;
// 创建PDF页面视图
const rawPdfDocument = toRaw(pdfDocument.value);
const pdfPage = await rawPdfDocument.getPage(pageNum);
// 先计算缩放比例
const originalViewport = pdfPage.getViewport({ scale: 1.0 });
const scaleX = containerWidth / originalViewport.width;
const scaleY = containerHeight / originalViewport.height;
const scale = Math.min(scaleX, scaleY);
const viewportWidth = originalViewport.viewBox[2];
const viewportHeight = originalViewport.viewBox[3];
const scaleX = containerWidth / viewportWidth;
const scaleY = containerHeight / viewportHeight;
const scale = Math.max(scaleX, scaleY);
// 创建基于缩放比例的视口
const scaledViewport = pdfPage.getViewport({ scale: scale });
const cssUnits = pdfjsViewer.CSS_UNITS || (96.0 / 72.0);
// 源码可以设置宽高，但是对文字层和page层还是不按照这个来。
// scaledViewport.width = containerWidth;
// scaledViewport.height = containerHeight;
// 计算补偿后的 scale
const compensatedScale = scale / cssUnits;
console.log(`PDF原始尺寸: ${originalViewport.width}x${originalViewport.height}, 缩放比例: ${scale}, 缩放后尺寸: ${scaledViewport.width}x${scaledViewport.height}`);
// 3. 重新创建 viewport 和 pageView
const newViewport = pdfPage.getViewport(scale);
// 创建PDFPageView实例
if (!pdfjsViewer) {
......@@ -933,8 +941,8 @@ const renderPdfPage = async (pageIndex) => {
const pageView = new pdfjsViewer.PDFPageView({
container: pageDiv,
id: pageNum - 1,
scale: 1.0, // 使用1.0，因为我们已经通过scaledViewport处理了缩放
defaultViewport: scaledViewport,
scale: compensatedScale, // 使用1.0，因为我们已经通过scaledViewport处理了缩放
defaultViewport: newViewport,
eventBus: toRaw(eventBus.value),
textLayerMode: 1, // 根据开关状态设置
annotationMode: 0, // 1=ENABLE
......@@ -942,7 +950,8 @@ const renderPdfPage = async (pageIndex) => {
renderer: "canvas",
enableXfa: false,
l10n: null,
textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory()
textLayerFactory: new pdfjsViewer.DefaultTextLayerFactory(),
useOnlyCssZoom: false // 添加这一行
});
// 设置PDF页面
......@@ -975,17 +984,6 @@ const renderPdfPage = async (pageIndex) => {
if (canvas) {
console.log(`Canvas CSS尺寸: ${elementStyle.width}x${elementStyle.height}, 实际尺寸: ${canvas.width}x${canvas.height}`);
// 确保canvas尺寸正确
if (Math.abs(rect.width - containerWidth) > 5 || Math.abs(rect.height - containerHeight) > 5) {
console.warn(`页面${pageNum}尺寸不匹配，Canvas: ${rect.width}x${rect.height}, 容器: ${containerWidth}x${containerHeight}`);
// 尝试强制调整canvas尺寸
if (Math.abs(canvas.width - scaledViewport.width) > 5) {
console.log(`强制调整Canvas尺寸从 ${canvas.width}x${canvas.height} 到 ${scaledViewport.width}x${scaledViewport.height}`);
canvas.style.width = `${scaledViewport.width}px`;
canvas.style.height = `${scaledViewport.height}px`;
}
}
}
}
......@@ -1172,11 +1170,37 @@ const updateZoom = () => {
}
}
// 计算新的尺寸
// 计算容器能容纳的最大尺寸，保持PDF的1:√2比例
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const baseWidth = Math.min(600, viewportWidth / 2 - 50);
const baseHeight = Math.min(800, viewportHeight - 100);
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;
} else {
// 高度能撑满，宽度也满足
baseWidth = maxWidthByHeight;
baseHeight = maxHeight;
}
// 确保不超过移动端的限制
if (isMobile.value) {
baseWidth = Math.min(baseWidth, viewportWidth - 20);
baseHeight = baseWidth * PDF_RATIO; // 高度 = 宽度 × 1.414
}
// 应用缩放
const scaledWidth = baseWidth * zoomLevel.value;
......@@ -1256,11 +1280,40 @@ const handleResize = async () => {
}
}
// 计算新的尺寸
// 计算容器能容纳的最大尺寸，保持PDF的1:√2比例
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const baseWidth = Math.min(600, viewportWidth / 2 - 50);
const baseHeight = Math.min(800, viewportHeight - 100);
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;
......@@ -1287,6 +1340,12 @@ const handleResize = async () => {
}
});
// 如果是PDF模式，重新调整PDF页面尺寸
if (props.isPdf && pdfInitialized.value) {
console.log("Resize时重新调整PDF页面尺寸");
await resizeVisiblePdfPages();
}
// 更新视口样式
const $viewport = $(".magazine-viewport");
$viewport.css({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论