feat

play/index.js

@@ -5,7 +5,7 @@ $(function() {
   window.courseware.getData(function(data) {
     if (!data) {
       // 修正默认数据路径为根目录
-      $.getJSON('./defaultData.json', function(defaultData) {
+      $.getJSON('./defaultData_1.json', function(defaultData) {
         console.log('加载默认数据:', defaultData);
         initializeApp(defaultData);
       }).fail(function() {
@@ -30,12 +30,11 @@ function initializeApp(data) {
       isPlaying: false,
       audio: null,
       currentTime: 0,
-      currentGroupIndex: -1,
+      activeGroupIndexes: [],
       imageSize: { width: 0, height: 0 },
       currentAudioPointIndex: -1,
       isManualPageChange: false,
       currentAudioText: '',
-      currentRect: null,
       isRectVisible: false,
       pageTransition: 'slide-left',
       needJumpToPageStartOnPlay: false,
@@ -45,15 +44,24 @@ function initializeApp(data) {
         if (!this.pages.length) return [];
         return this.pages[this.currentPage]?.groups || [];
       },
+      currentRects() {
+        const rects = [];
+        this.activeGroupIndexes.forEach(groupIndex => {
+          const group = this.currentGroups[groupIndex];
+          if (group && Array.isArray(group.group)) {
+            group.group.forEach(item => {
+              if (item.rect) {
+                rects.push(item.rect);
+              }
+            });
+          }
+        });
+        return rects;
+      },
       currentGroup() {
         if (this.currentGroupIndex === -1) return null;
         return this.currentGroups[this.currentGroupIndex] || null;
       },
-      currentRects() {
-        // 当前高亮的 group 可能为 null
-        if (!this.currentGroup || !Array.isArray(this.currentGroup.group)) return [];
-        return this.currentGroup.group.map(g => g.rect).filter(Boolean);
-      },
       currentRectStyle() {
         if (!this.currentRect || !this.imageSize.width || !this.imageSize.height) {
           return {};
@@ -143,18 +151,26 @@ function initializeApp(data) {
             break;
           }
         }
-        // 更新当前页面的高亮 group
+        
+        // 更新当前页面的高亮 groups
         const currentPage = this.pages[this.currentPage];
         if (currentPage && currentPage.groups) {
-          for (let idx = 0; idx < currentPage.groups.length; idx++) {
-            const group = currentPage.groups[idx];
-            if (group.start != null && group.end != null && currentTime >= group.start && currentTime <= group.end) {
-              this.currentGroupIndex = idx;
-              this.isRectVisible = true;
-              break;
-            }
+          // 重置活跃组索引数组
+          this.activeGroupIndexes = [];
+          
+          // 遍历所有组，找出所有时间匹配的组
+          currentPage.groups.forEach((group, idx) => {
+            if (group.start != null && group.end != null && 
+                currentTime >= group.start && currentTime <= group.end) {
+              // 将匹配的组索引添加到活跃组数组中
+              this.activeGroupIndexes.push(idx);
             }
+          });
+
+          // 如果有任何匹配的组，设置为可见
+          this.isRectVisible = this.activeGroupIndexes.length > 0;
         }
+
         // 字幕严格跟随 audio_points.points
         let subtitle = '';
         for (let i = 0; i < this.audioPoints.length; i++) {
@@ -165,14 +181,12 @@ function initializeApp(data) {
           }
         }
         this.currentAudioText = subtitle;
-        if (!subtitle) this.isRectVisible = false;
-        if (!subtitle) this.currentGroupIndex = -1;
       },
       handleAudioEnded() {
         this.isPlaying = false;
-        this.currentRect = null;
         this.currentAudioText = '';
         this.isRectVisible = false;
+        this.activeGroupIndexes = [];
         this.currentPage = 0; // 播放结束后回到第一页
       },
       togglePlay() {
@@ -222,38 +236,28 @@ function initializeApp(data) {
       },
       getRectStyle(rect) {
         if (!rect || !this.imageSize.width || !this.imageSize.height) return {};
-        // 获取容器尺寸
-        const container = this.$refs.mainImg?.parentNode;
-        if (!container) return {};
-        const containerWidth = container.clientWidth;
-        const containerHeight = container.clientHeight;
+        
+        // 获取图片元素
         const img = this.$refs.mainImg;
-        const imgNaturalWidth = img.naturalWidth;
-        const imgNaturalHeight = img.naturalHeight;
-        // 计算图片适配后的显示宽高和偏移
-        let displayWidth, displayHeight, offsetLeft, offsetTop;
-        const imgRatio = imgNaturalWidth / imgNaturalHeight;
-        const containerRatio = containerWidth / containerHeight;
-        if (imgRatio > containerRatio) {
-          // 图片更宽，宽度撑满
-          displayWidth = containerWidth;
-          displayHeight = containerWidth / imgRatio;
-          offsetLeft = 0;
-          offsetTop = (containerHeight - displayHeight) / 2;
-        } else {
-          // 图片更高，高度撑满
-          displayHeight = containerHeight;
-          displayWidth = containerHeight * imgRatio;
-          offsetTop = 0;
-          offsetLeft = (containerWidth - displayWidth) / 2;
-        }
-        // 归一化坐标转像素
-        const x = Number(rect.x), y = Number(rect.y), w = Number(rect.width), h = Number(rect.height);
+        if (!img) return {};
+
+        // 获取图片的实际显示尺寸和位置
+        const imgRect = img.getBoundingClientRect();
+        
+        // 计算矩形的实际位置和大小
+        const x = parseFloat(rect.x);
+        const y = parseFloat(rect.y);
+        const width = parseFloat(rect.width);
+        const height = parseFloat(rect.height);
+        
+        // 计算实际像素位置
         return {
-          left: (x * displayWidth + offsetLeft) + 'px',
-          top: (y * displayHeight + offsetTop) + 'px',
-          width: (w * displayWidth) + 'px',
-          height: (h * displayHeight) + 'px',
+          position: 'absolute',
+          left: (x * imgRect.width + imgRect.left) + 'px',
+          top: (y * imgRect.height + imgRect.top) + 'px',
+          width: (width * imgRect.width) + 'px',
+          height: (height * imgRect.height) + 'px',
+          display: rect.visible === false ? 'none' : 'block'
         };
       }
     }