askbot-dragon 1.8.35-beta → 1.8.36-beta

package/src/components/preview/pdfView.vue

@@ -88,7 +88,8 @@ export default {
       pdf: null,
       numPages: 0,
       scale: 1, // 初始缩小比例
-      pages: [], // { pageNumber: number, loaded: boolean, canvas: ref, loading: boolean, retryCount: number }
+      renderInProgress: false,
+      pages: [], // { pageNumber: number, loaded: boolean, canvas: ref, loading: boolean }
       // 静态高亮（坐标采用顶部为原点）
       highlights: [],
       searchQuery: "",
@@ -178,22 +179,28 @@ export default {
           loaded: false,
           canvas: null,
           loading: false,
-          retryCount: 0,
         }));
         // 清空搜索高亮
         this.searchHighlights = [];
         this.searchTermCount = 0;
         this.currentSearchIndex = 0;
-        setTimeout(async () => {
-          await this.setCanvasRef();
-        },100)
+        // 确保 DOM 更新完成后再设置 canvas 引用
+        await this.$nextTick();
+        await this.setCanvasRef();
+      }).catch(error => {
+        console.error('PDF 加载失败:', error);
       })
 
     },
     async loadPdf() {
       if (!this.pdfFile) return;
       await this.initPdf();
-      this.initObserver();
+      // 确保 canvas 引用设置完成后再初始化观察器
+      await this.$nextTick();
+      // 延迟初始化观察器，确保所有 canvas 都已准备好
+      setTimeout(() => {
+        this.initObserver();
+      }, 200);
     },
     initObserver(type) {
       if (this.observer) {
@@ -206,7 +213,7 @@ export default {
                 const index = Number(entry.target.getAttribute('data-index'));
                 const page = this.pages[index];
                 if (page && !page.loaded && !page.loading) {
-                   this.renderPage(page.pageNumber);
+                  this.renderPage(page.pageNumber);
                 }
                 this.updateCurrentPage();
               }
@@ -218,7 +225,9 @@ export default {
             threshold: 0.1,
           }
       );
-      this.$nextTick( () => {
+      // 确保 canvas 引用都已设置好后再开始观察
+      this.$nextTick(() => {
+        // 增加延迟确保所有 canvas 引用都已设置
         setTimeout(() => {
           this.pages.forEach((page, index) => {
             const canvas = page.canvas;
@@ -227,7 +236,7 @@ export default {
               this.observer.observe(canvas);
             }
           });
-        },300)
+        },500)
         if (type !== 'changeScale' && type !== 'onResize'){
           setTimeout(async () => {
             let currentPage = this.split_paragraphs.length > 0 ? this.split_paragraphs[0] : null;
@@ -250,195 +259,161 @@ export default {
         await this.updateCurrentPage();
       }
     },
-    async renderPage(pageNumber, retry = false) {
+    async renderPage(pageNumber) {
       if (!this.pdf) return;
       const pageIndex = pageNumber - 1;
       const pageData = this.pages[pageIndex];
       if (!pageData) return;
-      
-      // 如果正在加载且不是重试，避免重复渲染
-      if (pageData.loading && !retry) return;
-      // 如果已加载且不是重试，直接返回
-      if (pageData.loaded && !retry) return;
-      
-      // 重试机制：最多重试 3 次
-      const maxRetries = 3;
-      if (retry && pageData.retryCount >= maxRetries) {
-        console.error(`Max retries reached for page ${pageNumber}`);
-        this.$set(pageData, 'loading', false);
-        return;
-      }
-      
+      // 如果已经在加载或已加载，避免重复渲染
+      if (pageData.loaded || pageData.loading) return;
+
       this.pageNumber = pageNumber;
-      
+
       try {
+        // 标记为加载中，防止重复渲染
+        this.$set(pageData, 'loading', true);
+
         const page = await this.pdf.getPage(pageNumber);
-        let pdfWidth = page.getViewport({ scale: 1}).width;
+        let pdfWidth = page.getViewport({ scale: 1 }).width;
         const viewport = page.getViewport({ scale: this.calculateScale(pdfWidth) });
         this.viewport = viewport;
-        
+
         const canvas = pageData.canvas;
         if (!canvas) {
-          console.warn(`Canvas not found for page ${pageNumber}, will retry...`);
-          // 如果 canvas 不存在，增加重试计数并延迟重试
-          if (!retry) {
-            this.$set(pageData, 'retryCount', (pageData.retryCount || 0) + 1);
-            setTimeout(() => {
-              this.renderPage(pageNumber, true);
-            }, 200);
-          }
+          console.warn(`页面 ${pageNumber} 的 canvas 引用不存在`);
+          this.$set(pageData, 'loading', false);
           return;
         }
 
         const context = canvas.getContext("2d");
         if (!context) {
-          console.warn(`Failed to get context for page ${pageNumber}, will retry...`);
-          // 如果无法获取 context，增加重试计数并延迟重试
-          if (!retry) {
-            this.$set(pageData, 'retryCount', (pageData.retryCount || 0) + 1);
-            setTimeout(() => {
-              this.renderPage(pageNumber, true);
-            }, 200);
-          }
+          console.warn(`页面 ${pageNumber} 无法获取 canvas context`);
+          this.$set(pageData, 'loading', false);
           return;
         }
-        
+
         this.context = context;
-        const devicePixelRatio = window.devicePixelRatio || 1;
-        canvas.width = (viewport.width) * devicePixelRatio;
-        canvas.height = viewport.height * devicePixelRatio;
-        canvas.style.width = `${viewport.width}px`;
-        canvas.style.height = `${viewport.height}px`;
-        context.scale(devicePixelRatio, devicePixelRatio);
-
-        // 设置加载状态
-        this.$set(pageData, 'loading', true);
-        
-        // 清理旧的文本层
+
+        // 计算输出缩放比例（与 vuePdf 保持一致）
+        const outputScale = this.calculateScale(pdfWidth);
+
+        // 计算实际显示的尺寸
+        let domWidth = Math.floor(viewport.width);
+        let domHeight = Math.floor(viewport.height);
+
+        // 设置 canvas 尺寸（与 vuePdf 保持一致，使用 outputScale）
+        // 注意：vuePdf 不使用 devicePixelRatio，为了保持一致，我们也只使用 outputScale
+        canvas.width = Math.floor(viewport.width * outputScale);
+        canvas.height = Math.floor(viewport.height * outputScale);
+        canvas.style.width = `${domWidth}px`;
+        canvas.style.height = `${domHeight}px`;
+
+        // 创建 transform 矩阵（与 vuePdf 保持一致）
+        const transform = outputScale !== 1
+            ? [outputScale, 0, 0, outputScale, 0, 0]
+            : null;
+
+        // 清除旧的文本层
         let hasDoc = document.getElementById('textLayer' + pageNumber);
-        if (hasDoc && hasDoc.parentNode) {
+        if (hasDoc) {
           hasDoc.parentNode.removeChild(hasDoc);
         }
-        
-        // 渲染 PDF 页面
-        const renderTask = page.render({ canvasContext: context, viewport });
-        
-        // 等待渲染完成后再处理文本层和高亮
-        await renderTask.promise.then(async () => {
-          // 获取文本内容
+
+        // 渲染 PDF 页面到 canvas（传入 transform 确保正确渲染）
+        const renderTask = page.render({
+          canvasContext: context,
+          viewport: viewport,
+          transform: transform
+        });
+        await renderTask.promise;
+
+        // 渲染文本层（必须在高亮渲染之前，确保文本层在最上层）
+        try {
           const textContent = await page.getTextContent();
-          
-          // 创建文本层
           const textDiv = document.createElement('div');
           textDiv.setAttribute('class', 'textLayer');
           textDiv.setAttribute('id', 'textLayer' + pageNumber);
+          // 关键：TextLayerBuilder 也需要传入 transform，确保文本位置正确
           let textLayer = new TextLayerBuilder({
             textLayerDiv: textDiv,
             pageIndex: pageIndex,
             viewport: viewport,
+            transform: transform,  // 添加 transform 参数
           });
-          
-          // 设置文本层样式 - 移除高度限制和 overflow hidden，避免文字被裁剪
-          textDiv.style.width = `${viewport.width}px`;
-          // 不设置固定高度，让内容自然展开，或者设置为足够大的值
-          // textDiv.style.height = `${viewport.height}px`; // 移除固定高度
-          textDiv.style.minHeight = `${viewport.height}px`; // 使用最小高度
-          textDiv.style.overflow = 'visible'; // 改为 visible，避免裁剪文字
+          // 使用 domWidth 和 domHeight（与 vuePdf 保持一致）
+          textDiv.style.width = `${domWidth}px`;
+          textDiv.style.height = `${domHeight}px`;
+          // 使用 hidden 但确保尺寸正确（与 vuePdf 保持一致）
+          textDiv.style.overflow = 'hidden';
           textDiv.style.whiteSpace = 'pre-wrap';
           textDiv.style.position = 'absolute';
           textDiv.style.top = '0';
           textDiv.style.left = '0';
           textDiv.style.fontSize = '20px';
           textDiv.style.color = 'black';
-          textDiv.style.pointerEvents = 'none'; // 确保文本层不阻挡交互
-          
-          // 将文本 div 先添加到覆盖层中（TextLayerBuilder 需要 DOM 元素存在）
-          let pagesDiv = document.getElementById('canvas-wrapper' + pageIndex);
-          if (!pagesDiv) {
-            console.warn(`Canvas wrapper not found for page ${pageNumber}`);
-            return;
-          }
-          pagesDiv.appendChild(textDiv);
-          
-          // 设置文本内容并渲染
           textLayer.setTextContent(textContent);
           textLayer.render();
-          
-          // 等待文本层渲染完成（使用 nextTick 和 setTimeout 确保 DOM 完全更新）
+
+          // 渲染完成后，检查文本层实际内容高度，如果超出则调整
           await this.$nextTick();
-          // 额外等待一小段时间，确保 TextLayerBuilder 完成渲染
-          await new Promise(resolve => setTimeout(resolve, 50));
-          
-          // 确保容器有足够的高度来显示所有文本
-          // 获取文本层的实际高度（包括所有子元素）
-          const textLayerHeight = Math.max(
-            textDiv.scrollHeight,
-            textDiv.offsetHeight,
-            viewport.height
-          );
-          
-          // 如果文本层实际高度超过 viewport，调整容器和 canvas 的高度
-          if (textLayerHeight > viewport.height) {
-            // 调整 canvas wrapper 的最小高度
-            if (pagesDiv) {
-              pagesDiv.style.minHeight = `${textLayerHeight}px`;
-            }
-            // 调整 canvas 的显示高度（如果需要）
-            const canvas = pageData.canvas;
-            if (canvas && canvas.parentElement) {
-              canvas.parentElement.style.minHeight = `${textLayerHeight}px`;
+          const textLayerSpans = textDiv.querySelectorAll('span');
+          if (textLayerSpans.length > 0) {
+            let maxBottom = 0;
+            textLayerSpans.forEach(span => {
+              const rect = span.getBoundingClientRect();
+              const parentRect = textDiv.getBoundingClientRect();
+              const relativeBottom = rect.bottom - parentRect.top;
+              if (relativeBottom > maxBottom) {
+                maxBottom = relativeBottom;
+              }
+            });
+            // 如果文本内容超出当前高度，增加文本层高度（增加一些边距）
+            if (maxBottom > domHeight) {
+              textDiv.style.height = `${Math.ceil(maxBottom + 10)}px`;
             }
           }
-          
-          // 在文本层渲染完成后，再渲染高亮区域
-          // 注意：高亮是在 canvas 上绘制的，不会遮挡文本层（文本层在 canvas 上方）
-          // 渲染已有高亮区域（静态highlights）
-          this.renderHighlights(context, pageNumber, viewport);
-          // 渲染搜索高亮区域
-          this.renderSearchHighlights(context, pageNumber, viewport);
-          
-          // 重置重试计数
-          this.$set(pageData, 'retryCount', 0);
-          // 更新页面状态
-          this.$set(pageData, 'loading', false);
-          this.$set(pageData, 'loaded', true);
-        }).catch((error) => {
-          console.error(`Error rendering page ${pageNumber}:`, error);
-          // 如果渲染失败，尝试重试
-          if (!retry && (pageData.retryCount || 0) < maxRetries) {
-            this.$set(pageData, 'retryCount', (pageData.retryCount || 0) + 1);
-            this.$set(pageData, 'loading', false);
-            // 延迟后重试
-            setTimeout(() => {
-              this.renderPage(pageNumber, true);
-            }, 500);
-          } else {
-            // 确保在错误时也更新状态
-            this.$set(pageData, 'loading', false);
-            this.$set(pageData, 'loaded', false);
+
+          // 将文本 div 添加到覆盖层中
+          let pagesDiv = document.getElementById('canvas-wrapper' + pageIndex);
+          if (pagesDiv) {
+            pagesDiv.appendChild(textDiv);
           }
-        });
-      } catch (error) {
-        console.error(`Error loading page ${pageNumber}:`, error);
-        // 如果加载失败，尝试重试
-        if (!retry && (pageData.retryCount || 0) < maxRetries) {
-          this.$set(pageData, 'retryCount', (pageData.retryCount || 0) + 1);
-          this.$set(pageData, 'loading', false);
-          // 延迟后重试
-          setTimeout(() => {
-            this.renderPage(pageNumber, true);
-          }, 500);
-        } else {
-          this.$set(pageData, 'loading', false);
-          this.$set(pageData, 'loaded', false);
+        } catch (textError) {
+          console.warn(`页面 ${pageNumber} 文本层渲染失败:`, textError);
+          // 文本层渲染失败不影响页面继续渲染
+        }
+
+        // 渲染已有高亮区域（静态highlights）
+        // 注意：高亮是在 canvas 上绘制的，不会覆盖文本层（文本层在 canvas 上方）
+        // 需要传入 outputScale，因为 canvas 使用了 transform 渲染
+        try {
+          this.renderHighlights(context, pageNumber, viewport, outputScale);
+        } catch (highlightError) {
+          console.warn(`页面 ${pageNumber} 高亮渲染失败:`, highlightError);
+        }
+
+        // 渲染搜索高亮区域
+        try {
+          this.renderSearchHighlights(context, pageNumber, viewport, outputScale);
+        } catch (searchHighlightError) {
+          console.warn(`页面 ${pageNumber} 搜索高亮渲染失败:`, searchHighlightError);
         }
+
+        // 标记为已加载
+        this.$set(pageData, 'loading', false);
+        this.$set(pageData, 'loaded', true);
+      } catch (error) {
+        console.error(`页面 ${pageNumber} 渲染失败:`, error);
+        // 渲染失败时重置状态，允许重试
+        this.$set(pageData, 'loading', false);
+        this.$set(pageData, 'loaded', false);
       }
     },
     calculateScale(pdfWidth) {
       const containerWidth = document.getElementById('pdfViewPage').clientWidth - 50;
       return (containerWidth / pdfWidth) * this.scale;
     },
-    async renderHighlights(context, number,viewport) {
+    async renderHighlights(context, number, viewport, outputScale = 1) {
       const pageHighlights = this.highlights.filter(item => (item.page === number ))
       let highlights = this.mergedGroups(pageHighlights);
       this.mergedGroupsList = this.mergedGroupsList.concat(highlights)
@@ -452,63 +427,60 @@ export default {
             groups.push(position.slice(i, i + 4));
           }
           for (let i = 0;i<groups.length;i++){
-            this.drawHighlight(context, viewport, groups[i], fillStyle, false);
+            this.drawHighlight(context, viewport, groups[i], fillStyle, false, outputScale);
           }
         });
       }
     },
-    renderSearchHighlights(context, pageNumber, viewport) {
+    renderSearchHighlights(context, pageNumber, viewport, outputScale = 1) {
       const pageHighlights = this.searchHighlights.filter(h => h.pageNumber === pageNumber);
       pageHighlights.forEach(({ position }) => {
-        this.drawHighlight(context, viewport, position, "rgba(255, 255, 0, 0.4)", true);
+        this.drawHighlight(context, viewport, position, "rgba(255, 255, 0, 0.4)", true, outputScale);
       });
     },
-    drawHighlight(context, viewport, position, fillStyle, fromSearch = false) {
-      if (!context || !position || position.length < 4) return;
-      
+    drawHighlight(context, viewport, position, fillStyle, fromSearch = false, outputScale = 1) {
       const [x1, y1, x2, y2] = position;
+      // 使用 viewport.scale 计算 PDF 坐标到 viewport 坐标的转换
       const scale = viewport.scale;
+      // PDF 页面的实际高度（未缩放）
       const pageHeight = viewport.height / viewport.scale;
 
-      let canvasX1 = x1 * scale;
-      let canvasX2 = x2 * scale;
-      let canvasY1, canvasY2;
+      // 计算在 viewport 坐标系中的位置（PDF 坐标 → viewport 坐标）
+      let viewportX1 = x1 * scale;
+      let viewportX2 = x2 * scale;
+      let viewportY1, viewportY2;
 
       if (fromSearch) {
-        // 搜索高亮：PDF坐标系（左下原点）
-        canvasY1 = (pageHeight - y1) * scale;
-        canvasY2 = (pageHeight - y2) * scale;
+        // 搜索高亮：PDF坐标系（左下原点），需要转换为顶部原点
+        viewportY1 = (pageHeight - y1) * scale;
+        viewportY2 = (pageHeight - y2) * scale;
       } else {
-        // 静态 highlights 假设顶部坐标原点不需翻转
-        canvasY1 = y1 * scale;
-        canvasY2 = y2 * scale;
+        // 静态 highlights：顶部坐标原点，直接使用
+        viewportY1 = y1 * scale;
+        viewportY2 = y2 * scale;
       }
       
-      // 确保坐标在有效范围内
-      const minX = Math.min(canvasX1, canvasX2);
-      const minY = Math.min(canvasY1, canvasY2);
-      const width = Math.abs(canvasX2 - canvasX1);
-      const height = Math.abs(canvasY2 - canvasY1);
+      // 由于 canvas 使用了 transform 渲染，PDF.js 会在内部应用 transform
+      // 但 context 的坐标系统是 canvas 的实际尺寸（viewport.width * outputScale）
+      // 而 viewport 坐标是基于 viewport.width 的，所以需要转换为 canvas 坐标
+      // 注意：outputScale 和 viewport.scale 是相同的值，所以这里只需要乘以 outputScale
+      // 但实际上 viewport.scale 已经应用了，所以这里应该直接使用 viewport 坐标
+      // 但 canvas 的实际尺寸是 viewport.width * outputScale，所以需要缩放
+      let canvasX1 = viewportX1 * outputScale;
+      let canvasX2 = viewportX2 * outputScale;
+      let canvasY1 = viewportY1 * outputScale;
+      let canvasY2 = viewportY2 * outputScale;
       
-      // 检查坐标是否在 canvas 范围内
-      if (minX < 0 || minY < 0 || minX + width > viewport.width || minY + height > viewport.height) {
-        // 如果超出范围，进行裁剪
-        const clippedX = Math.max(0, minX);
-        const clippedY = Math.max(0, minY);
-        const clippedWidth = Math.min(width, viewport.width - clippedX);
-        const clippedHeight = Math.min(height, viewport.height - clippedY);
-        
-        if (clippedWidth > 0 && clippedHeight > 0) {
-          context.beginPath();
-          context.fillStyle = fillStyle;
-          context.fillRect(clippedX, clippedY, clippedWidth, clippedHeight);
-        }
-      } else {
-        // 正常绘制
-        context.beginPath();
-        context.fillStyle = fillStyle;
-        context.fillRect(minX, minY, width, height);
-      }
+      // 清除当前路径
+      context.beginPath();
+
+      context.fillStyle = fillStyle;
+      context.fillRect(
+          Math.min(canvasX1, canvasX2),
+          Math.min(canvasY1, canvasY2),
+          Math.abs(canvasX2 - canvasX1),
+          Math.abs(canvasY2 - canvasY1)
+      );
     },
     handleFileUpload(event) {
       const file = event.target.files[0];
@@ -519,27 +491,26 @@ export default {
       }
     },
     async setCanvasRef() {
-      // 使用 $nextTick 确保 DOM 已更新
+      // 等待 DOM 完全更新
       await this.$nextTick();
-      
-      // 如果 refs 还没有准备好，等待一段时间后重试
-      if (!this.$refs.canvases || this.$refs.canvases.length === 0) {
-        return new Promise((resolve) => {
-          setTimeout(async () => {
-            await this.setCanvasRef();
-            resolve();
-          }, 100);
-        });
+
+      if (!this.$refs.canvases || !Array.isArray(this.$refs.canvases)) {
+        console.warn('Canvas 引用未准备好，延迟重试');
+        // 如果 canvas 引用还没准备好，延迟重试
+        setTimeout(() => {
+          this.setCanvasRef();
+        }, 100);
+        return;
       }
-      
-      // 设置 canvas 引用
-      this.pages.forEach((page, index) => {
+
+      // 确保所有 canvas 引用都已设置
+      for (let index = 0; index < this.pages.length; index++) {
         if (this.$refs.canvases && this.$refs.canvases[index]) {
           this.$set(this.pages[index], 'canvas', this.$refs.canvases[index]);
         } else {
-          console.warn(`Canvas ref not found for page ${index + 1}`);
+          console.warn(`页面 ${index + 1} 的 canvas 引用不存在`);
         }
-      });
+      }
     },
     clearPages() {
       this.pages = [];
@@ -621,8 +592,7 @@ export default {
     zoomIn() {
       this.updateCurrentPage();
       // 检查是否有页面正在加载
-      const hasLoadingPage = this.pages.some(p => p.loading);
-      if (hasLoadingPage) return;
+      if (this.pages.some(p => p.loading)) return;
       const container = this.$refs.pdfContainer;
       const currentScroll = container.scrollTop;
       this.scale += 0.1;
@@ -631,8 +601,7 @@ export default {
     zoomOut() {
       this.updateCurrentPage();
       // 检查是否有页面正在加载
-      const hasLoadingPage = this.pages.some(p => p.loading);
-      if (hasLoadingPage) return;
+      if (this.pages.some(p => p.loading)) return;
       const container = this.$refs.pdfContainer;
       const currentScroll = container.scrollTop;
       this.scale = Math.max(this.scale - 0.1, 0.1);
@@ -642,11 +611,10 @@ export default {
       const pages = Vue.observable(this.pages)
       pages.forEach((p) => {
         p.loaded = false;
-        this.$set(p, 'loading', false);
-        this.$set(p, 'retryCount', 0);
+        this.$set(p,'loading',false)
         if (p.canvas) {
           const ctx = p.canvas.getContext('2d');
-          ctx.clearRect(0, 0, p.canvas.width, p.canvas.height);
+          ctx.clearRect(0,0,p.canvas.width,p.canvas.height);
         }
       });
 
@@ -679,8 +647,7 @@ export default {
     async doSearch() {
       if (!this.pdf || !this.searchQuery) return;
       // 检查是否有页面正在加载
-      const hasLoadingPage = this.pages.some(p => p.loading);
-      if (hasLoadingPage) return;
+      if (this.pages.some(p => p.loading)) return;
 
       this.searchHighlights = [];
       const numPages = this.numPages;
@@ -743,8 +710,7 @@ export default {
       const currentScroll = container.scrollTop;
       this.pages.forEach((p) => {
         p.loaded = false;
-        this.$set(p, 'loading', false);
-        this.$set(p, 'retryCount', 0);
+        this.$set(p,'loading',false)
         if (p.canvas) {
           const ctx = p.canvas.getContext("2d");
           ctx.clearRect(0, 0, p.canvas.width, p.canvas.height);
@@ -775,18 +741,16 @@ export default {
       clearTimeout(this.resizeTimeout);
       this.resizeTimeout = setTimeout(() => {
         // 检查是否有页面正在加载
-        const hasLoadingPage = this.pages.some(p => p.loading);
-        if (hasLoadingPage) return;
+        if (this.pages.some(p => p.loading)) return;
         const container = this.$refs.pdfContainer;
         const currentScroll = container.scrollTop;
         const pages = Vue.observable(this.pages)
         pages.forEach((p) => {
           p.loaded = false;
-          this.$set(p, 'loading', false);
-          this.$set(p, 'retryCount', 0);
+          this.$set(p,'loading',false)
           if (p.canvas) {
             const ctx = p.canvas.getContext('2d');
-            ctx.clearRect(0, 0, p.canvas.width, p.canvas.height);
+            ctx.clearRect(0,0,p.canvas.width,p.canvas.height);
           }
         });
         this.$nextTick(() => {
@@ -874,15 +838,11 @@ export default {
   display: flex;
   justify-content: center;
   width: 100%;
-  min-height: fit-content; /* 确保容器能容纳所有内容 */
-  overflow: visible; /* 允许内容超出，避免裁剪 */
 }
 
 .canvas-wrapper {
   position: relative;
   width: 100%;
-  min-height: 100%; /* 确保容器有足够高度 */
-  overflow: visible; /* 允许内容超出，避免裁剪 */
 }
 
 /* 在loading时覆盖canvas显示加载动画 */