提交代码

src/view/case/photos/canvas-photo-editor.js

@@ -1555,112 +1555,6 @@ resizePageAndReflow(pages, pageIndex, itemValue) {
       const pdf = new jsPDF({ orientation: orient, unit: "mm", format });
       const pdfW = pdf.internal.pageSize.getWidth();
       const pdfH = pdf.internal.pageSize.getHeight();
-      // const groups = [];
-      // for (let i = 0; i < this.pages.length; i += perSheet) {
-      //   groups.push(this.pages.slice(i, i + perSheet));
-      // }
-
-      // groups.forEach((group, sheetIndex) => {
-      //   if (sheetIndex > 0) pdf.addPage();
-
-      //   group.forEach((_, idxInSheet) => {
-      //     const pageIndex = sheetIndex * perSheet + idxInSheet;
-      //     const page = this.pages[pageIndex];
-
-      //     // 离屏画布
-      //     const pageCanvas = document.createElement("canvas");
-      //     pageCanvas.width = this.pageWidth * DPR;
-      //     pageCanvas.height = this.pageHeight * DPR;
-      //     const ctx = pageCanvas.getContext("2d");
-      //     ctx.scale(DPR, DPR);
-
-      //     // 背景
-      //     ctx.fillStyle = "#fff";
-      //     ctx.fillRect(0, 0, this.pageWidth, this.pageHeight);
-
-      //     const layout = this.getItemSize(page.layoutMode);
-      //     const coords = this.getCoordinate(0, layout);
-
-      //     coords.forEach((coord, q) => {
-      //       const photoId = page.list[q];
-      //       let imgItem = this.photos.find(p => p.id === photoId)
-      //       const photo = {
-      //         ...imgItem,
-      //         ...page.item[q],
-      //       }
-
-      //       // 相框底板
-      //       ctx.fillStyle = photoId?'#fff':"#D9D9D9";
-      //       ctx.fillRect(coord.x, coord.y, coord.width, coord.height);
-      //       // ctx.strokeStyle = "#eee";
-      //       // ctx.strokeRect(coord.x, coord.y, coord.width, coord.height);
-
-      //       if (photo) {
-      //         const img = this.imgCache.get(photo.id);
-      //         if (img && img.complete) {
-      //           // 图片裁切（不超出相框）
-      //           ctx.save();
-      //           ctx.beginPath();
-      //           ctx.rect(coord.x, coord.y, coord.width, coord.height);
-      //           ctx.clip();
-
-      //           const s = Math.min(coord.width / img.width, coord.height / img.height);
-      //           let w = img.width * s;
-      //           const h = img.height * s;
-      //           let x = coord.x + (coord.width - w) / 2;
-      //           const y = coord.y + (coord.height - h) / 2;
-      //           ctx.drawImage(img, x, y, w, h);
-
-      //           ctx.restore();
-      //         }
-
-      //         // 文字
-      //         ctx.fillStyle = "#000";
-      //         const text = photo.id?photo.name:"说明文字";
-      //         this.drawCenteredTextWithEllipsis(
-      //           ctx, text,
-      //           coord.x + coord.width / 2,
-      //           coord.y + coord.height + 40,
-      //           24, 2
-      //         );
-
-      //         // 虚线框
-      //         // ctx.setLineDash([1, 1]);
-      //         // ctx.strokeRect(coord.x, coord.y + coord.height + this.imgMargin, coord.width, this.titleHieght);
-      //         // ctx.setLineDash([]);
-      //       }
-      //     });
-      //     // 页码
-      //     ctx.fillStyle = '#666666'
-      //     ctx.font = `${16}px sans-serif`
-      //     ctx.textAlign = 'right'
-      //     ctx.fillText(
-      //       `第 ${pageIndex + 1 + this.pageCount} 页`,
-      //       this.pageWidth - (75),
-      //       this.pageHeight - (50)
-      //     )
-      //     // ==========================================
-      //     // 🔥 1:1 还原你原 drawGuideLine 标引逻辑
-      //     // ==========================================
-      //     this.renderIndexList(ctx, pageIndex, true)
-
-      //     const imgData = pageCanvas.toDataURL("image/png", 1.0);
-
-      //     // PDF 位置
-      //     let x, y, w, h;
-      //     if (paperType === "a4") {
-      //       [x, y, w, h] = [0 + 28, 0, pdfW-28, pdfH];
-      //     } else if (paperType === "a3") {
-      //       w = ((pdfW / 2) - 28); h = pdfH; x = (idxInSheet * w)+56; y = 0;
-      //     } else {
-      //       w = pdfW / 4; h = pdfH;
-      //       x = idxInSheet * (pdfW / 4);
-      //       y = 0;
-      //     }
-
-      //     pdf.addImage(imgData, "PNG", x, y, w, h);
-      //   });
-      // });
       const list = this.renderPage(paperType, 'pdf')
       list.map((imgData,groupIndex) => {
         if (groupIndex > 0) pdf.addPage();
@@ -1711,143 +1605,6 @@ resizePageAndReflow(pages, pageIndex, itemValue) {
 
 
     try {
-      // const DPR = 3;
-
-      // // 完全和你 exportPagesToPDF 保持一致的规则
-      // const rules = {
-      //   a4: { perSheet: 1 },
-      //   a3: { perSheet: 2 },
-      //   four: { perSheet: 4 },
-      // };
-      // const perSheet = rules[paperType]?.perSheet || 1;
-      // const groups = [];
-      // for (let i = 0; i < this.pages.length; i += perSheet) {
-      //   groups.push(this.pages.slice(i, i + perSheet));
-      // }
-
-      // // 遍历每组 → 生成一张图片
-      // for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
-      //   const group = groups[groupIndex];
-
-      //   // 创建画布（和PDF导出尺寸逻辑一致）
-      //   const pageCanvas = document.createElement("canvas");
-      //   let pageWidth = this.pageWidth
-      //   // if (paperType === "four") {
-      //   //   pageWidth = pageWidth * (724 / 840)
-      //   // }
-      //   const mmToPx = 96 / 25.4;
-      //   const bindingMargin = (paperType === "a3" ? 56 : paperType === "a4" ? 28 : 0) * DPR * mmToPx; // mm
-      //   const pageWith = pageWidth * DPR * (paperType === "a3" ? 2 : paperType === "a4" ? 1 : 4);
-      //   pageCanvas.width = pageWith + bindingMargin
-      //   pageCanvas.height = this.pageHeight * DPR * 1;
-      //   const ctx = pageCanvas.getContext("2d");
-      //   ctx.scale(DPR, DPR);
-      //   // 白色背景
-      //   ctx.fillStyle = "#fff";
-      //   ctx.fillRect(0, 0, pageCanvas.width + bindingMargin, pageCanvas.height);
-
-      //   // 绘制本组页面
-      //   group.forEach((page, idxInSheet) => {
-      //     const pageIndex = groupIndex * perSheet + idxInSheet;
-      //     let offsetX = 0;
-      //     let offsetY = 0;
-
-      //     if (paperType === "a3") offsetX = idxInSheet * this.pageWidth;
-      //     if (paperType === "four") {
-      //       offsetX = idxInSheet * pageWidth;
-      //       // offsetY = idxInSheet * this.pageHeight;
-      //     }
-
-      //     ctx.save();
-      //     ctx.translate(offsetX, offsetY);
-
-      //     // ==========================================
-      //     // 🔥 直接复用你 PDF 里一模一样的绘制逻辑
-      //     // ==========================================
-      //     const layout = this.getItemSize(page.layoutMode);
-      //     const coords = this.getCoordinate(0, layout);
-
-      //     coords.forEach((coord, i) => {
-      //       const photoId = page.list[i];
-      //       let imgItem = this.photos.find(p => p.id === photoId)
-      //       const photo = {
-      //         ...imgItem,
-      //         ...page.item[i],
-      //       }
-
-      //       ctx.fillStyle = photoId?'#fff':"#D9D9D9";
-      //       ctx.fillRect(coord.x, coord.y, coord.width, coord.height);
-      //       // ctx.strokeStyle = "#eee";
-      //       // ctx.strokeRect(coord.x, coord.y, coord.width, coord.height);
-
-      //       if (photo) {
-      //         const img = this.imgCache.get(photo.id);
-      //         if (img && img.complete) {
-      //           ctx.save();
-      //           ctx.beginPath();
-      //           ctx.rect(coord.x, coord.y, coord.width, coord.height);
-      //           ctx.clip();
-
-      //           const s = Math.min(coord.width / img.width, coord.height / img.height);
-      //           let w = img.width * s;
-      //           const h = img.height * s;
-      //           let x = coord.x + (coord.width - w) / 2;
-      //           const y = coord.y + (coord.height - h) / 2;
-      //           // if (paperType == 'four') {
-      //           //   w = w / (724 / 840)
-      //           //   x = x * (724 / 840)
-      //           // }
-      //           ctx.drawImage(img, x, y, w, h);
-      //           ctx.restore();
-      //         }
-
-      //         // 文字
-      //         ctx.fillStyle = "#000";
-      //         const text = photo.id?photo.name:"说明文字";
-      //         this.drawCenteredTextWithEllipsis(
-      //           ctx, text,
-      //           coord.x + coord.width / 2,
-      //           coord.y + coord.height + 40,
-      //           24, 2
-      //         );
-
-      //         // ctx.setLineDash([1, 1]);
-      //         // ctx.strokeRect(coord.x, coord.y + coord.height + this.imgMargin, coord.width, this.titleHieght);
-      //         // ctx.setLineDash([]);
-      //       }
-      //     });
-      //     // 页码
-      //     ctx.fillStyle = '#666666'
-      //     ctx.font = `${16}px sans-serif`
-      //     ctx.textAlign = 'right'
-      //     ctx.fillText(
-      //       `第 ${pageIndex + 1 + this.pageCount} 页`,
-      //       this.pageWidth - (75),
-      //       this.pageHeight - (50)
-      //     )
-      //     // ==========================================
-      //     // 🔥 1:1 还原你原 drawGuideLine 标引逻辑
-      //     // ==========================================
-      //     this.renderIndexList(ctx, pageIndex, false)
-
-      //     ctx.restore();
-      //   });
-      //   // 转图片并加入 ZIP
-      //   // ========= 加在这里 =========
-
-      //   const newCanvas = document.createElement('canvas');
-      //   newCanvas.width = pageCanvas.width;
-      //   newCanvas.height = pageCanvas.height;
-      //   const ctxs = newCanvas.getContext('2d');
-      //   ctxs.fillStyle = '#fff';
-      //   ctxs.fillRect(0,0, newCanvas.width, newCanvas.height);
-      //   ctxs.drawImage(pageCanvas, bindingMargin, 0);
-
-      //   // 导出用 newCanvas
-      //   const base64 = newCanvas.toDataURL('image/jpeg');
-      //   // const base64 = pageCanvas.toDataURL("image/jpeg");
-      //   zip.file(`第${groupIndex + 1}张.jpg`, base64.split(",")[1], { base64: true });
-      // }
       const list = this.renderPage(paperType, 'img')
       list.map((base64,groupIndex) => {
         zip.file(`第${groupIndex + 1}张.jpg`, base64.split(",")[1], { base64: true });
@@ -2021,7 +1778,7 @@ resizePageAndReflow(pages, pageIndex, itemValue) {
   }
   renderIndexList(ctx, pageIndex, pageWith, perSheet = 1) {
     this.indexingLineList.forEach(line => {
-      const { points, coordinate, indexingList } = line;
+      let { points, coordinate, indexingList } = line;
       const startInfo = indexingList[0];
       const endInfo = indexingList[1];
 
@@ -2041,12 +1798,14 @@ resizePageAndReflow(pages, pageIndex, itemValue) {
       ctx.lineJoin = 'round';
 
       // 页面全局偏移（核心修正）
-      const pageOffsetX = pageIndex * ((pageWith + this.pageMargin) * perSheet);
+      const pageOffsetX = pageIndex * ((pageWith + 30) * perSheet);
       // const pageOffsetX = pageIndex * (this.pageWidth + this.pageMargin) * perSheet;
       // 绘制连线
       ctx.beginPath();
+      coordinate.x = coordinate.x - (Math.round(coordinate.x / this.pageWidth)*this.pageMargin);
       points.forEach((p, i) => {
-        const x = p.x - pageOffsetX;
+        p.x = p.x - (Math.round(p.x / this.pageWidth)*this.pageMargin);
+        const x = p.x;
         const y = p.y;
         i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
       });
@@ -2056,14 +1815,14 @@ resizePageAndReflow(pages, pageIndex, itemValue) {
         const last = points[points.length - 1];
         ctx.beginPath();
         if (startInfo.count == endInfo.count && startInfo.count == 2 && startInfo.itemIndex == endInfo.itemIndex && points.length == 4) {
-          ctx.moveTo(coordinate.x - pageOffsetX, last.y);
-          ctx.lineTo((coordinate.x + coordinate.width - pageOffsetX), last.y);
+          ctx.moveTo(coordinate.x, last.y);
+          ctx.lineTo((coordinate.x + coordinate.width), last.y);
         } else if (startInfo.pageIndex === endInfo.pageIndex) {
-          ctx.moveTo(coordinate.x - pageOffsetX, last.y);
-          ctx.lineTo(coordinate.x - pageOffsetX + coordinate.width, last.y);
+          ctx.moveTo(coordinate.x, last.y);
+          ctx.lineTo(coordinate.x + coordinate.width, last.y);
         } else {
-          ctx.moveTo(last.x - pageOffsetX, coordinate.y);
-          ctx.lineTo(last.x - pageOffsetX, coordinate.y + coordinate.height);
+          ctx.moveTo(last.x, coordinate.y);
+          ctx.lineTo(last.x, coordinate.y + coordinate.height);
         }
         ctx.stroke();
       // }