Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
P
pic-reader
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
龙菲
pic-reader
Commits
a26457df
提交
a26457df
authored
8月 17, 2025
作者:
gzcnkilys_admin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix:解决单双页放大缩小的渲染问题
暂未解决放大缩小以后的turn.js的翻页可触控区域问题和翻页动画位置错误的问题。
上级
3ac2a8ee
隐藏空白字符变更
内嵌
并排
正在显示
1 个修改的文件
包含
46 行增加
和
34 行删除
+46
-34
index.vue
src/components/BookReader/index.vue
+46
-34
没有找到文件。
src/components/BookReader/index.vue
浏览文件 @
a26457df
...
...
@@ -226,16 +226,26 @@ const calculatePageDimensions = (viewportWidth, viewportHeight, zoom = 1.0) => {
// 更新页面尺寸
const
updatePageDimensions
=
(
dimensions
,
$magazine
)
=>
{
// 直接更新 turn.js 尺寸
$magazine
.
turn
(
"size"
,
dimensions
.
scaledWidth
*
2
,
dimensions
.
scaledHeight
);
if
(
isMobile
.
value
)
{
$magazine
.
turn
(
"size"
,
dimensions
.
scaledWidth
,
dimensions
.
scaledHeight
);
}
else
{
$magazine
.
turn
(
"size"
,
dimensions
.
scaledWidth
*
2
,
dimensions
.
scaledHeight
);
}
$magazine
.
turn
(
'resize'
);
$magazine
.
turn
(
'update'
);
// 更新页面尺寸
$magazine
.
children
().
each
(
function
()
{
const
$page
=
$
(
this
);
$page
.
css
({
width
:
dimensions
.
scaledWidth
,
height
:
dimensions
.
scaledHeight
,
});
});
//
$magazine.children().each(function () {
//
const $page = $(this);
//
$page.css({
//
width: dimensions.scaledWidth,
//
height: dimensions.scaledHeight,
//
});
//
});
};
// 更新视口样式
...
...
@@ -263,7 +273,6 @@ const restoreLoadedImages = (visiblePages, $magazine) => {
const
calculatePdfViewportScale
=
(
pdfPage
,
containerWidth
,
containerHeight
)
=>
{
try
{
debugger
const
originalViewport
=
pdfPage
.
getViewport
({
scale
:
1.0
});
const
viewportWidth
=
originalViewport
.
viewBox
[
2
];
const
viewportHeight
=
originalViewport
.
viewBox
[
3
];
...
...
@@ -274,7 +283,6 @@ const calculatePdfViewportScale = (pdfPage, containerWidth, containerHeight) =>
// 验证 scale 值
if
(
isNaN
(
scale
)
||
scale
<=
0
)
{
console
.
error
(
`PDF viewport scale 计算错误:
${
scale
}
`
);
return
null
;
}
...
...
@@ -1027,10 +1035,11 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => {
let
pageNum
=
pageIndex
+
1
;
const
pageInfo
=
getPageInfoByPageNum
(
pageNum
);
// 检查页面是否已经渲染过
if
(
renderedPages
.
value
.
has
(
pageIndex
))
{
if
(
forceCheck
)
{
const
pageInfo
=
getPageInfoByPageNum
(
pageNum
);
if
(
!
pageInfo
)
{
console
.
warn
(
`页面
${
pageNum
}
信息获取失败,跳过scale检查`
);
return
;
...
...
@@ -1049,14 +1058,23 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => {
console
.
log
(
`开始渲染PDF页面
${
pageNum
}
,使用PdfViewer`
);
try
{
// 获取页面容器
const
pageContainer
=
magazine
.
value
.
querySelector
(
`.p
${
pageNum
}
`
);
if
(
!
pageContainer
)
{
console
.
warn
(
`Page container not found for page
${
pageNum
}
`
);
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
=
''
;
...
...
@@ -1073,9 +1091,12 @@ const renderPdfPage = async (pageIndex, forceCheck = true) => {
// 等待DOM更新完成
await
nextTick
();
const
containerWidth
=
pageWrapper
.
clientWidth
;
const
containerHeight
=
pageWrapper
.
clientHeight
;
// 使用封装的函数等待容器尺寸
const
{
containerWidth
,
containerHeight
}
=
await
waitForContainerSize
(
pageContainer
,
pageNum
);
console
.
log
(
`页面
${
pageNum
}
容器尺寸:
${
containerWidth
}
x
${
containerHeight
}
`
);
//
const { containerWidth, containerHeight } = await waitForContainerSize(pageContainer, pageNum);
//
console.log(`页面${pageNum}容器尺寸: ${containerWidth}x${containerHeight}`);
// 创建PDF页面视图
const
rawPdfDocument
=
toRaw
(
pdfDocument
.
value
);
...
...
@@ -1253,8 +1274,6 @@ const checkAndUpdatePdfPageScale = async (pageIndex) => {
const
getPageInfoByPageNum
=
(
pageNum
)
=>
{
try
{
// 首先尝试查找翻页容器,这个容器时动态计算的
debugger
let
pageContainer
=
magazine
.
value
.
querySelector
(
`.turn-page-wrapper[page="
${
pageNum
}
"]`
);
// 检查容器尺寸
...
...
@@ -1402,7 +1421,6 @@ const previousPage = () => {
const
toFirst
=
()
=>
{
const
firstPage
=
props
.
pages
[
0
].
page_num
;
goToPage
(
firstPage
);
};
const
toEnd
=
()
=>
{
...
...
@@ -1422,6 +1440,8 @@ const zoomOut = () => {
// 提取公共的缩放更新逻辑
const
updateZoomCommon
=
async
(
isResize
=
false
)
=>
{
debugger
if
(
!
magazine
.
value
||
!
isInitialized
.
value
)
return
;
const
$magazine
=
$
(
magazine
.
value
);
...
...
@@ -1438,39 +1458,31 @@ const updateZoomCommon = async (isResize = false) => {
baseHeight
.
value
=
dimensions
.
baseHeight
;
updatePageDimensions
(
dimensions
,
$magazine
);
// 等待DOM更新完成后再处理PDF页面
await
nextTick
();
// 如果是resize操作,调用turn.js的resize方法重新计算布局
if
(
isResize
)
{
$magazine
.
turn
(
"resize"
);
// 等待DOM更新完成后再处理PDF页面
await
nextTick
();
}
// 使用封装的函数获取可见页面信息
if
(
processedPages
.
value
.
length
>
0
)
{
const
visiblePages
=
getVisiblePageInfo
(
$magazine
,
processedPages
);
restoreLoadedImages
(
visiblePages
,
$magazine
);
}
//
if (processedPages.value.length > 0) {
//
const visiblePages = getVisiblePageInfo($magazine, processedPages);
//
restoreLoadedImages(visiblePages, $magazine);
//
}
// 处理PDF页面缩放 - 在magazine尺寸更新后重新计算scale
if
(
props
.
isPdf
&&
pdfInitialized
.
value
)
{
if
(
isResize
)
{
console
.
log
(
"Resize时重新调整PDF页面尺寸和scale"
);
await
resizeVisiblePdfPages
();
}
else
{
console
.
log
(
"Zoom时重新调整PDF页面尺寸和scale"
);
await
resizeVisiblePdfPages
();
}
}
updateViewportStyles
();
//
updateViewportStyles();
}
catch
(
error
)
{
console
.
error
(
"Error updating zoom:"
,
error
);
}
};
const
updateZoom
=
()
=>
{
updateZoomCommon
(
fals
e
);
updateZoomCommon
(
tru
e
);
};
const
handleResize
=
async
()
=>
{
...
...
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论