Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
tangning
/
caseEditor
sklonowany z bill/public-fuse
1
0
Forkuj 0
Pliki
Przeglądaj źródła

导出内容更新

tangning 1 dzień temu
rodzic
b399cacba2
commit
74eff3198d
3 zmienionych plików z 83 dodań i 13 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 50 0
      public/model.html
  2. 26 13
      src/view/case/photos/canvas-photo-editor.js
  3. 7 0
      src/view/material/sceneImg.vue

+ 50 - 0
public/model.html
Wyświetl plik 

@@ -0,0 +1,50 @@
 
+<!doctype html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+    <style>
 
+      html,
 
+      body {
 
+        width: 100%;
 
+        height: 100%;
 
+        margin: 0;
 
+        overflow: hidden;
 
+      }
 
+      .scene {
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
+      .controls {
 
+        position: absolute;
 
+        left: 0;
 
+        bottom: 0;
 
+        width: 100%;
 
+        z-index: 999;
 
+      }
 
+    </style>
 
+    <script src="./sdk/kankan-sdk-deps.js"></script>
 
+    <script src="./sdk/kankan-sdk.js"></script>
 
+  </head>
 
+  <body>
 
+    <div class="scene"></div>
 
+    <div class="controls">
 
+      <button onclick="__sdk.Camera.panorama()">漫游</button>
 
+      <button onclick="__sdk.Camera.floorplan()">平面</button>
 
+      <button onclick="__sdk.Camera.dollhouse()">模型</button>
 
+    </div>
 
+    <script>
 
+      localStorage.setItem(
 
+        "token",
 
+        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjEsImRldmljZSI6ImRlZmF1bHQtZGV2aWNlIiwiZWZmIjotMSwicm5TdHIiOiJ5YXZmZEVxY3huNzRCQTVSeGZORm82ZlU0Q2RPMW1JbyIsImlkIjoxLCJ1c2VySWQiOjgxNywicnlJZCI6InN1cGVyLWFkbWluIiwicm9sZVR5cGUiOiJzdXBlci1hZG1pbiIsInBsYXRmb3JtSWQiOjEsInJvbGVJZCI6MSwidXNlck5hbWUiOiJzdXBlci1hZG1pbiIsIm5pY2tOYW1lIjoi6LaF57qn566h55CG5ZGYIn0.dxhh64f_TwggIU29GBPQ_1jQRH99e1TdSb5YHz3LdYg'      );
 
+      window.__sdk = new KanKan({
 
+        dom: ".scene",
 
+        num: "SG-hx-7R336wSsXwL",
 
+        server: "./",
 
+        resource: "./oss/",
 
+      });
 
+      __sdk.render();
 
+    </script>
 
+  </body>
 
+</html>

+ 26 - 13
src/view/case/photos/canvas-photo-editor.js
Wyświetl plik 

@@ -1513,13 +1513,13 @@ export class CanvasPhotoEditor {
 
     try {
 
       this.isHistory = false;
 
       const DPR = 3;
 
-
 
+      const mmToPx = 96 / 25.4;
 
       const rules = {
 
-        a4: { perSheet: 1, orient: "portrait", format: "a4" },
 
-        a3: { perSheet: 2, orient: "landscape", format: "a3" },
 
-        four: { perSheet: 4, orient: "landscape", format: [728, 297] },
 
+        a4: { perSheet: 1, orient: "portrait", format: "a4", bindingMargin: 28*mmToPx },
 
+        a3: { perSheet: 2, orient: "landscape", format: "a3", bindingMargin: 28*2*mmToPx },
 
+        four: { perSheet: 4, orient: "landscape", format: [728, 297], bindingMargin: 0 },
 
       };
 
-      const { perSheet, orient, format } = rules[paperType];
 
+      const { perSheet, orient, format, bindingMargin } = rules[paperType];
 
       const pdf = new jsPDF({ orientation: orient, unit: "mm", format });
 
       const pdfW = pdf.internal.pageSize.getWidth();
 
       const pdfH = pdf.internal.pageSize.getHeight();
 
@@ -1621,9 +1621,9 @@ export class CanvasPhotoEditor {
 
           // PDF 位置
 
           let x, y, w, h;
 
           if (paperType === "a4") {
 
-            [x, y, w, h] = [0, 0, pdfW, pdfH];
 
+            [x, y, w, h] = [0 + 28, 0, pdfW-28, pdfH];
 
           } else if (paperType === "a3") {
 
-            w = pdfW / 2; h = pdfH; x = idxInSheet * w; y = 0;
 
+            w = ((pdfW / 2) - 28); h = pdfH; x = (idxInSheet * w)+56; y = 0;
 
           } else {
 
             w = pdfW / 4; h = pdfH;
 
             x = idxInSheet * w;
 
@@ -1690,14 +1690,16 @@ export class CanvasPhotoEditor {
 
         // if (paperType === "four") {
 
         //   pageWidth = pageWidth * (724 / 840)
 
         // }
 
-        pageCanvas.width = pageWidth * DPR * (paperType === "a3" ? 2 : paperType === "a4" ? 1 : 4);
 
+        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, pageCanvas.height);
 
+        ctx.fillRect(0, 0, pageCanvas.width + bindingMargin, pageCanvas.height);
 
 
         // 绘制本组页面
 
         group.forEach((page, idxInSheet) => {
 
@@ -1781,13 +1783,24 @@ export class CanvasPhotoEditor {
 
           // ==========================================
 
           // 🔥 1:1 还原你原 drawGuideLine 标引逻辑
 
           // ==========================================
 
-          this.renderIndexList(ctx, pageIndex, false)
 
+          this.renderIndexList(ctx, pageIndex, true)
 
 
           ctx.restore();
 
         });
 
-
 
         // 转图片并加入 ZIP
 
-        const base64 = pageCanvas.toDataURL("image/jpeg");
 
+        // ========= 加在这里 =========
 
+
 
+        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 });
 
       }

+ 7 - 0
src/view/material/sceneImg.vue
Wyświetl plik 

@@ -1206,20 +1206,25 @@ const exportToPDF = async (isAll, item) => {
 
   }
 
 };
 
 const handleOpen = (val) => {
 
+  // 关闭时重置到照片卷标签页
 
   if (!val) {
 
     setTimeout(()=>{
 
       handleClick({ paneName: "照片卷" });
 
     }, 500)
 
   } else {
 
     console.log("handleOpen");
 
+    // 初始化汇总数据结构
 
     let Alllist = {
 
       pages: [],
 
       indexingLineList: [],
 
     };
 
+    // 遍历所有照片数据，合并页面和标引线
 
     casePhotoList.value.map((ele) => {
 
       let content = ele.content && JSON.parse(ele.content);
 
       let { pages, indexingLineList } = content;
 
+      // 计算横向偏移量，每张图片宽度600+间距4
 
       let xAdd = (600 + 4) * Alllist.pages.length;
 
+      // 根据偏移量调整标引线坐标
 
       if (xAdd) {
 
         indexingLineList = indexingLineList.map((element) => {
 
           let points = element.points.map((item) => ({
 
@@ -1229,10 +1234,12 @@ const handleOpen = (val) => {
 
           return { ...element, points };
 
         });
 
       }
 
+      // 合并当前照片的页面和标引线到汇总数据
 
       Alllist.pages.push(...pages);
 
       Alllist.indexingLineList.push(...indexingLineList);
 
       console.log("handleOpen", content);
 
     });
 
+    // 将汇总数据赋值给子组件
 
     childrenList.value.src = Alllist;
 
     childrenList.value.value = -1;
 
     console.log("handleOpen", Alllist);