Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
P
pic-reader
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
龙菲
pic-reader
Commits
a29140d1
提交
a29140d1
authored
8月 17, 2025
作者:
gzcnkilys_admin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat:封装优化代码
上级
4f7bfcda
显示空白字符变更
内嵌
并排
正在显示
1 个修改的文件
包含
295 行增加
和
332 行删除
+295
-332
index.vue
src/components/BookReader/index.vue
+295
-332
没有找到文件。
src/components/BookReader/index.vue
浏览文件 @
a29140d1
...
...
@@ -147,52 +147,7 @@
<svg-icon
name=
"to-end"
:size=
"30"
@
click=
"toEnd"
></svg-icon>
</el-tooltip>
</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>
</div>
</
template
>
...
...
@@ -213,6 +168,210 @@ import VueEasyLightbox from "vue-easy-lightbox";
import
GuideMobile
from
"../GuideMobile/index.vue"
;
import
audioFlip
from
"@/assets/audio/flip.mp3"
;
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 相关变量声明
let
pdfjsLib
=
null
;
let
pdfjsViewer
=
null
;
...
...
@@ -579,38 +738,19 @@ 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
(
maxHeightByWidth
<=
maxHeight
)
{
// 宽度能撑满,高度也满足
pageWidth
=
maxWidth
;
pageHeight
=
maxHeightByWidth
;
console
.
log
(
`选择宽度撑满方案: 宽度=
${
pageWidth
}
, 高度=
${
pageHeight
}
`
);
}
else
{
// 高度能撑满,宽度也满足
pageWidth
=
maxWidthByHeight
;
pageHeight
=
maxHeight
;
console
.
log
(
`选择高度撑满方案: 宽度=
${
pageWidth
}
, 高度=
${
pageHeight
}
`
);
// 使用封装的函数计算页面尺寸
const
dimensions
=
calculatePageDimensions
(
viewportWidth
,
viewportHeight
,
1.0
);
if
(
!
dimensions
)
{
console
.
error
(
"计算页面尺寸失败"
);
return
;
}
//
确保不超过移动端的限制
if
(
isMobile
.
value
)
{
pageWidth
=
Math
.
min
(
pageWidth
,
viewportWidth
-
20
)
;
pageHeight
=
pageWidth
*
PDF_RATIO
;
// 高度 = 宽度 × 1.414
console
.
log
(
`移动端调整后: 宽度=
${
pageWidth
}
, 高度=
${
pageHeight
}
`
)
;
}
//
更新响应式变量
baseWidth
.
value
=
dimensions
.
baseWidth
;
baseHeight
.
value
=
dimensions
.
baseHeight
;
const
pageWidth
=
dimensions
.
baseWidth
;
const
pageHeight
=
dimensions
.
baseHeight
;
// 添加调试信息
console
.
log
(
`视口尺寸:
${
viewportWidth
}
x
${
viewportHeight
}
`
);
...
...
@@ -752,6 +892,12 @@ const loadPdf = async () => {
return
;
}
// 防止重复加载
if
(
pdfLoading
.
value
||
pdfDocument
.
value
)
{
console
.
log
(
"PDF 正在加载中或已加载,跳过重复加载"
);
return
;
}
try
{
pdfLoading
.
value
=
true
;
console
.
log
(
"开始加载PDF:"
,
props
.
pdfUrl
);
...
...
@@ -814,8 +960,9 @@ const loadPdf = async () => {
// 监听 props.pages 的变化
watch
(
()
=>
props
.
pages
,
(
newPages
)
=>
{
if
(
newPages
&&
newPages
.
length
>
0
&&
!
props
.
isPdf
)
{
(
newPages
,
oldPages
)
=>
{
// 避免在组件初始化时重复加载
if
(
newPages
&&
newPages
.
length
>
0
&&
!
props
.
isPdf
&&
newPages
!==
oldPages
)
{
processedPages
.
value
=
processPages
(
newPages
);
loadImages
();
}
...
...
@@ -826,8 +973,9 @@ watch(
// 监听PDF URL的变化
watch
(
()
=>
props
.
pdfUrl
,
async
(
newUrl
)
=>
{
if
(
newUrl
&&
props
.
isPdf
)
{
async
(
newUrl
,
oldUrl
)
=>
{
// 避免在组件初始化时重复加载
if
(
newUrl
&&
props
.
isPdf
&&
newUrl
!==
oldUrl
)
{
console
.
log
(
"PDF URL 变化,重新加载:"
,
newUrl
);
await
loadPdf
();
}
...
...
@@ -887,72 +1035,26 @@ const renderPdfPage = async (pageIndex) => {
// 等待DOM更新完成
await
nextTick
();
// 获取容器实际尺寸 - 使用更可靠的方法
let
containerWidth
=
pageContainer
.
clientWidth
;
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
();
});
}
// 使用封装的函数等待容器尺寸
const
{
containerWidth
,
containerHeight
}
=
await
waitForContainerSize
(
pageContainer
,
pageNum
);
console
.
log
(
`页面
${
pageNum
}
容器尺寸:
${
containerWidth
}
x
${
containerHeight
}
`
);
// 创建PDF页面视图
const
rawPdfDocument
=
toRaw
(
pdfDocument
.
value
);
const
pdfPage
=
await
rawPdfDocument
.
getPage
(
pageNum
);
// 先计算缩放比例
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
.
max
(
scaleX
,
scaleY
);
const
cssUnits
=
pdfjsViewer
.
CSS_UNITS
||
(
96.0
/
72.0
);
// 使用封装的函数计算缩放比例
const
scaleInfo
=
calculatePdfViewportScale
(
pdfPage
,
containerWidth
,
containerHeight
);
if
(
!
scaleInfo
)
{
console
.
error
(
`页面
${
pageNum
}
scale 计算失败`
);
return
;
}
//
计算补偿后的 scale
const
compensatedScale
=
scale
/
cssUnits
;
//
使用补偿后的 scale 创建 viewport
const
newViewport
=
pdfPage
.
getViewport
(
scaleInfo
.
compensatedScale
)
;
// 3. 重新创建 viewport 和 pageView
const
newViewport
=
pdfPage
.
getViewport
(
scale
);
// 创建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
// 添加这一行
});
// 使用封装的函数创建 PDFPageView
const
pageView
=
createPdfPageView
(
pageDiv
,
pageNum
,
scaleInfo
.
compensatedScale
,
newViewport
,
eventBus
);
// 设置PDF页面
pageView
.
setPdfPage
(
pdfPage
);
...
...
@@ -997,6 +1099,7 @@ const renderPdfPage = async (pageIndex) => {
}
};
// 重新调整PDF页面尺寸
// 重新调整PDF页面尺寸
const
resizePdfPage
=
async
(
pageIndex
)
=>
{
if
(
!
pdfViewerInstances
.
value
.
has
(
pageIndex
))
return
;
...
...
@@ -1019,29 +1122,30 @@ const resizePdfPage = async (pageIndex) => {
// 获取PDF页面和视口
const
pdfPage
=
pageView
.
pdfPage
;
const
originalViewport
=
pdfPage
.
getViewport
({
scale
:
1.0
});
// 计算新的缩放比例
const
scaleX
=
containerWidth
/
originalViewport
.
width
;
const
scaleY
=
containerHeight
/
originalViewport
.
height
;
const
newScale
=
Math
.
min
(
scaleX
,
scaleY
);
// 使用封装的函数计算缩放比例
const
scaleInfo
=
calculatePdfViewportScale
(
pdfPage
,
containerWidth
,
containerHeight
);
if
(
!
scaleInfo
)
{
console
.
error
(
`页面
${
pageNum
}
resize scale 计算失败`
);
return
;
}
// 创建新的缩放视口
const
newScaledViewport
=
pdfPage
.
getViewport
({
scale
:
newScale
});
console
.
log
(
`页面
${
pageNum
}
尺寸调整完成,新缩放比例:
${
scaleInfo
.
scale
}
`
);
// 更新
页面视图的视口和缩放比例
pageView
.
update
(
1.0
,
newScaledViewport
);
// 更新
pageView 的缩放
pageView
.
update
(
scaleInfo
.
compensatedScale
);
// 重新渲染页面
await
pageView
.
draw
();
console
.
log
(
`页面
${
pageNum
}
尺寸调整完成,新缩放比例:
${
newScale
}
`
);
console
.
log
(
`页面
${
pageNum
}
resize 完成
`
);
}
catch
(
error
)
{
console
.
error
(
`调整页面
${
pageNum
}
尺寸失败:`
,
error
);
}
};
// 批量重新调整所有可见PDF页面尺寸
// 批量重新调整所有可见PDF页面尺寸
const
resizeVisiblePdfPages
=
async
()
=>
{
if
(
!
magazine
.
value
||
!
isInitialized
.
value
)
return
;
...
...
@@ -1051,21 +1155,10 @@ const resizeVisiblePdfPages = async () => {
try
{
const
currentPage
=
$magazine
.
turn
(
"page"
);
// 使用processedPages的长度而不是turn.js的pages值
const
totalPages
=
processedPages
.
value
.
length
;
// 获取当前可见的页面索引
const
visiblePages
=
[];
if
(
isMobile
.
value
)
{
// 移动端只显示当前页
visiblePages
.
push
(
currentPage
-
1
);
}
else
{
// 桌面端显示当前页和下一页
visiblePages
.
push
(
currentPage
-
1
);
if
(
currentPage
<
totalPages
)
{
visiblePages
.
push
(
currentPage
);
}
}
// 使用封装的函数获取可见页面索引
const
visiblePages
=
getVisiblePageIndexes
(
currentPage
,
totalPages
,
isMobile
.
value
);
// 重新调整可见页面的尺寸
for
(
const
pageIndex
of
visiblePages
)
{
...
...
@@ -1074,6 +1167,8 @@ const resizeVisiblePdfPages = async () => {
}
}
console
.
log
(
'所有可见 PDF 页面 resize 完成'
);
}
catch
(
error
)
{
console
.
error
(
"重新调整PDF页面尺寸失败:"
,
error
);
}
...
...
@@ -1147,93 +1242,63 @@ const zoomOut = () => {
};
const
updateZoom
=
()
=>
{
if
(
magazine
.
value
&&
isInitialized
.
value
)
{
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
);
if
(
!
magazine
.
value
||
!
isInitialized
.
value
)
return
;
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
,
});
}
}
const
$magazine
=
$
(
magazine
.
value
);
if
(
!
$magazine
.
length
)
return
;
// 计算容器能容纳的最大尺寸,保持PDF的1:√2比例
try
{
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
dimensions
=
calculatePageDimensions
(
viewportWidth
,
viewportHeight
,
zoomLevel
.
value
);
if
(
!
dimensions
)
return
;
// 计算基于高度的最大尺寸
const
maxHeight
=
viewportHeight
-
100
;
const
maxWidthByHeight
=
maxHeight
/
PDF_RATIO
;
// 宽度 = 高度 ÷ 1.414
baseWidth
.
value
=
dimensions
.
baseWidth
;
baseHeight
.
value
=
dimensions
.
baseHeight
;
let
baseWidth
,
baseHeight
;
updatePageDimensions
(
dimensions
,
$magazine
)
;
// 选择能撑满一边的方案
if
(
maxHeightByWidth
<=
maxHeight
)
{
// 宽度能撑满,高度也满足
baseWidth
=
maxWidth
;
baseHeight
=
maxHeightByWidth
;
}
else
{
// 高度能撑满,宽度也满足
baseWidth
=
maxWidthByHeight
;
baseHeight
=
maxHeight
;
// 使用封装的函数获取可见页面信息
if
(
processedPages
.
value
.
length
>
0
)
{
const
visiblePages
=
getVisiblePageInfo
(
$magazine
,
processedPages
);
restoreLoadedImages
(
visiblePages
,
$magazine
);
}
// 确保不超过移动端的限制
if
(
isMobile
.
value
)
{
baseWidth
=
Math
.
min
(
baseWidth
,
viewportWidth
-
20
);
baseHeight
=
baseWidth
*
PDF_RATIO
;
// 高度 = 宽度 × 1.414
updateViewportStyles
();
}
catch
(
error
)
{
console
.
error
(
"Error updating zoom:"
,
error
);
}
};
// 应用缩放
const
scaledWidth
=
baseWidth
*
zoomLevel
.
value
;
const
scaledHeight
=
baseHeight
*
zoomLevel
.
value
;
const
handleResize
=
async
()
=>
{
try
{
const
$magazine
=
$
(
magazine
.
value
);
if
(
!
$magazine
.
length
)
return
;
// 直接更新 turn.js 尺寸
$magazine
.
turn
(
"size"
,
scaledWidth
*
2
,
scaledHeight
)
;
const
viewportWidth
=
window
.
innerWidth
;
const
viewportHeight
=
window
.
innerHeight
;
// 更新页面尺寸
$magazine
.
children
().
each
(
function
()
{
const
$page
=
$
(
this
);
$page
.
css
({
width
:
scaledWidth
,
height
:
scaledHeight
,
});
});
const
dimensions
=
calculatePageDimensions
(
viewportWidth
,
viewportHeight
,
zoomLevel
.
value
);
if
(
!
dimensions
)
return
;
// 恢复已加载的图片
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
;
updatePageDimensions
(
dimensions
,
$magazine
);
await
nextTick
();
// 使用封装的函数获取可见页面信息
if
(
processedPages
.
value
.
length
>
0
)
{
const
visiblePages
=
getVisiblePageInfo
(
$magazine
,
processedPages
);
restoreLoadedImages
(
visiblePages
,
$magazine
);
}
});
// 更新视口样式
const
$viewport
=
$
(
".magazine-viewport"
);
$viewport
.
css
({
width
:
"100%"
,
height
:
"100%"
,
overflow
:
"auto"
,
});
if
(
props
.
isPdf
&&
pdfInitialized
.
value
)
{
console
.
log
(
"Resize时重新调整PDF页面尺寸"
);
await
resizeVisiblePdfPages
();
}
updateViewportStyles
();
}
catch
(
error
)
{
console
.
error
(
"Error handling resize:"
,
error
);
}
};
...
...
@@ -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
=
()
=>
{
try
{
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论