Commit f39abbdf authored by 15011343103's avatar 15011343103

fix: 适配和热区位置修复

parent eb645f71
...@@ -46,40 +46,36 @@ html, body { ...@@ -46,40 +46,36 @@ html, body {
.photo-section { .photo-section {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden; overflow: hidden;
position: relative;
background: #000; background: #000;
} }
.photo-wrapper { .photo-wrapper {
display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; transition: transform 0.3s ease;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
} }
.photo-item { .photo-item {
flex: 0 0 100%; flex: 0 0 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
overflow: hidden; overflow: hidden;
position: relative;
} }
.photo-item img { .photo-item img {
max-width: 100%; width: 100%;
max-height: 100%; height: 100%;
width: auto;
height: auto;
object-fit: contain; object-fit: contain;
display: block;
user-select: none;
-webkit-user-drag: none;
} }
.point-area { .point-area {
...@@ -88,6 +84,8 @@ html, body { ...@@ -88,6 +84,8 @@ html, body {
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
z-index: 10;
pointer-events: auto;
} }
.point-area:hover { .point-area:hover {
...@@ -102,6 +100,7 @@ html, body { ...@@ -102,6 +100,7 @@ html, body {
background-color: rgba(64, 158, 255, 0.1); background-color: rgba(64, 158, 255, 0.1);
pointer-events: none; pointer-events: none;
transition: all 0.3s ease; transition: all 0.3s ease;
z-index: 9;
} }
.controls { .controls {
......
...@@ -64,7 +64,10 @@ ...@@ -64,7 +64,10 @@
<div v-for="(url, index) in bookData.photoUrls" <div v-for="(url, index) in bookData.photoUrls"
:key="index" :key="index"
class="photo-item"> class="photo-item">
<img :src="url" :alt="'Page ' + (index + 1)"> <img :src="url"
:alt="'Page ' + (index + 1)"
@load="onImageLoad(index, $event)"
:ref="el => { if (el) pageImage[index] = el }">
<!-- 点读区域 --> <!-- 点读区域 -->
<template v-if="currentPage === index"> <template v-if="currentPage === index">
<div v-for="(point, pointIndex) in getCurrentPagePoints()" <div v-for="(point, pointIndex) in getCurrentPagePoints()"
......
...@@ -83,7 +83,10 @@ new Vue({ ...@@ -83,7 +83,10 @@ new Vue({
isPanelExpanded: false, isPanelExpanded: false,
catalogList: [], // 当前目录列表 catalogList: [], // 当前目录列表
catalogStack: [], // 目录导航栈 catalogStack: [], // 目录导航栈
initialPid: '421756' // 初始PID initialPid: '421756', // 初始PID
pageImage: [], // 存储图片元素引用
imageLoadStatus: {}, // 记录图片加载状态
imageRects: {} // 存储图片实际显示尺寸
} }
}, },
computed: { computed: {
...@@ -140,6 +143,11 @@ new Vue({ ...@@ -140,6 +143,11 @@ new Vue({
async loadCourseware(id) { async loadCourseware(id) {
try { try {
this.loading = true; this.loading = true;
this.pageImage = [];
this.imageLoadStatus = {};
this.imageRects = {};
this.currentPage = 0;
this.currentHighlight = null;
const auth_key = getAuthKey(); const auth_key = getAuthKey();
const params = { const params = {
auth_key, auth_key,
...@@ -325,11 +333,17 @@ new Vue({ ...@@ -325,11 +333,17 @@ new Vue({
getHighlightStyle(rect) { getHighlightStyle(rect) {
if (!rect) return {}; if (!rect) return {};
const imageRect = this.imageRects[this.currentPage];
if (!imageRect) return {};
const { actualWidth, actualHeight, offsetX, offsetY } = imageRect;
return { return {
left: rect.x * 100 + '%', position: 'absolute',
top: rect.y * 100 + '%', left: `${offsetX + (rect.x * actualWidth)}px`,
width: rect.width * 100 + '%', top: `${offsetY + (rect.y * actualHeight)}px`,
height: rect.height * 100 + '%', width: `${rect.width * actualWidth}px`,
height: `${rect.height * actualHeight}px`,
cursor: this.isPointMode ? 'pointer' : 'default' cursor: this.isPointMode ? 'pointer' : 'default'
}; };
}, },
...@@ -368,9 +382,55 @@ new Vue({ ...@@ -368,9 +382,55 @@ new Vue({
} }
} }
this.currentPage = newPage; this.currentPage = newPage;
// 如果图片已加载但尺寸未计算,重新计算
if (this.imageLoadStatus[newPage] && !this.imageRects[newPage]) {
const img = this.pageImage[newPage];
if (img) {
this.onImageLoad(newPage, { target: img });
}
}
}, },
togglePanel() { togglePanel() {
this.isPanelExpanded = !this.isPanelExpanded; this.isPanelExpanded = !this.isPanelExpanded;
},
// 处理图片加载完成事件
onImageLoad(index, event) {
const img = event.target;
this.$set(this.imageLoadStatus, index, true);
// 计算图片实际显示尺寸和位置
const container = img.parentElement;
const containerRect = container.getBoundingClientRect();
const imgRatio = img.naturalWidth / img.naturalHeight;
const containerRatio = containerRect.width / containerRect.height;
let actualWidth, actualHeight, offsetX, offsetY;
if (imgRatio > containerRatio) {
actualWidth = containerRect.width;
actualHeight = actualWidth / imgRatio;
offsetX = 0;
offsetY = (containerRect.height - actualHeight) / 2;
} else {
actualHeight = containerRect.height;
actualWidth = actualHeight * imgRatio;
offsetX = (containerRect.width - actualWidth) / 2;
offsetY = 0;
}
// 存储计算结果
this.$set(this.imageRects, index, {
actualWidth,
actualHeight,
offsetX,
offsetY
});
// 如果是当前页面,强制更新视图
if (index === this.currentPage) {
this.$forceUpdate();
}
} }
}, },
async created() { async created() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment