添加铺满功能

34c277f4 · zhuzhequan · 5cfdd1a6 · 34c277f4 · 34c277f4 · 34c277f4
Commit 34c277f4 authored Jun 20, 2025 by zhuzhequan
Show whitespace changes
Inline Side-by-side

Showing with 96 additions and 29 deletions

src/static/icon/pm.png
+0 -0

src/views/design/head/index.vue
+4 -1

src/views/design/main/imgSetting.vue
+9 -0

src/views/design/main/index.vue
+83 -28

No files found.
--- a/src/static/icon/pm.png
+++ b/src/static/icon/pm.png
--- a/src/views/design/head/index.vue
+++ b/src/views/design/head/index.vue
@@ -323,7 +323,10 @@ export default {
        this.detail = findByPodProductionNo.data;
        // console.log("detail111111", findByPodProductionNo);
        let imageResList = [];
-        let designImagesCanvasJsonList = this.detail.drParam;
+        let designImagesCanvasJsonList =    this.detail.drParam
+        this.detail.adjustable = true
+        this.detail.mssWidth = 400
+        this.detail.mssHeight = 450
        if (designImagesCanvasJsonList) {
          designImagesCanvasJsonList = JSON.parse(designImagesCanvasJsonList);
          let imageList = await this.canvasToImage(designImagesCanvasJsonList);

--- a/src/views/design/main/imgSetting.vue
+++ b/src/views/design/main/imgSetting.vue
@@ -240,6 +240,15 @@ export default {
            :span="24"
            style="display: flex;justify-content: space-between;padding:0 30px;"
          >
+            <el-tooltip content="铺满">
+              <el-button @click="$emit('ev', 'cover')" class="btn">
+                <img
+                  style="width: 13px;height: 13px"
+                  src="@/static/icon/pm.png"
+                  alt=""
+                />
+              </el-button>
+            </el-tooltip>
            <el-tooltip content="居中">
              <el-button @click="$emit('ev', 'center')" class="btn">
                <img

--- a/src/views/design/main/index.vue
+++ b/src/views/design/main/index.vue
 <script>
 import VueDragResizeRotate from "@minogin/vue-drag-resize-rotate";
 import PicScrollbarBox from "../../../components/PicScrollbarBox.vue";
 const { ipcRenderer } = require("electron");
 // import { fabric } from "fabric";
@@ -15,6 +16,7 @@ const uuid = require("uuid");
 import { startLoading, endLoading } from "@/utils/axios.js";
 import { mapState } from "vuex";
 const img = require("../../../assets/bg_tshirt_shadow.png");
 export default {
@@ -22,7 +24,7 @@ export default {
    PrintDialog,
    VueDragResizeRotate,
    ImgSetting,
-    PicScrollbarBox,
+    PicScrollbarBox
  },
  props: { factoryType: { type: String, default: "CN" } },
  destroyed() {
@@ -64,7 +66,7 @@ export default {
      return {
        w: this.grid[this.systemSetting.gridValue].w,
        v: this.grid[this.systemSetting.gridValue].value,
-        h: this.grid[this.systemSetting.gridValue].h,
+        h: this.grid[this.systemSetting.gridValue].h
      };
    },
    gridSpacing() {
@@ -74,7 +76,7 @@ export default {
      if (unit === "mm") {
        return {
          w: gridSpacing + "px",
-          h: gridSpacing + "px",
+          h: gridSpacing + "px"
        };
      } else if (unit === "inch") {
        let w = this.grid[this.systemSetting.gridValue].w;
@@ -84,7 +86,7 @@ export default {
        return {
          // w: gridSpacing * ((w - row + 1) / row) + "px",
          w: gridSpacing * (w / row) + "px",
-          h: gridSpacing * (h / col) + "px",
+          h: gridSpacing * (h / col) + "px"
        };
      }
      return { w: "480px", h: "540px" };
@@ -96,7 +98,7 @@ export default {
      if (unit === "mm") {
        return {
          w: gridSpacing + "px",
-          h: gridSpacing + "px",
+          h: gridSpacing + "px"
        };
      } else if (unit === "inch") {
        let w = 480;
@@ -105,7 +107,7 @@ export default {
        let h = 540;
        return {
          w: gridSpacing * (w / row) + "px",
-          h: gridSpacing * (h / col) + "px",
+          h: gridSpacing * (h / col) + "px"
        };
      }
      return { w: "480px", h: "540px" };
@@ -138,8 +140,8 @@ export default {
      "WHproportion",
      "grid",
      "windowWH",
-      "countryList",
+      "countryList"
-    ]),
+    ])
  },
  data() {
    return {
@@ -157,7 +159,7 @@ export default {
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
-        "#c7158577",
+        "#c7158577"
      ],
      actionList: [],
      checkList: [],
@@ -192,7 +194,7 @@ export default {
      col: 7,
      oldImgStyle: "",
      drrDom: null,
-      imgDom: null,
+      imgDom: null
    };
  },
  watch: {
@@ -220,7 +222,7 @@ export default {
        this.$store.commit("changeImgList", this.imgList);
      },
      deep: true,
-      immediate: true,
+      immediate: true
    },
    selectIndex() {
      if (this.selectIndex >= 0) {
@@ -264,7 +266,7 @@ export default {
          this.imgDom = "";
        }
      },
-      immediate: true,
+      immediate: true
    },
    systemSetting: {
      handler() {
@@ -272,8 +274,8 @@ export default {
          this.$refs.imgSetting?.getCurrentItem(this.imgList[this.selectIndex]);
        }
      },
-      deep: true,
+      deep: true
-    },
+    }
  },
  methods: {
    // 重构为可手动触发的方法
@@ -297,8 +299,8 @@ export default {
        formData.append("file", files[i]);
        let { data } = await that.$api.post("/uploadImage", formData, {
          headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
+            "Content-Type": "application/x-www-form-urlencoded"
-          },
+          }
        });
        that.selectImgIndex = 0;
        that.addFile(data, () => {
@@ -430,7 +432,7 @@ export default {
        ) {
          size = {
            width: this.detail.mssWidth,
-            height: this.detail.mssHeight,
+            height: this.detail.mssHeight
          };
        }
        this.getBackFile({ files: [it], size }, () => {
@@ -460,6 +462,26 @@ export default {
      }
      switch (type) {
+        case "cover":
+          if (this.imgList[this.selectIndex].w > this.imgList[this.selectIndex].h) {
+            // 宽度铺满，高度自适应
+            let r = Number(this.gridWH.w) / this.imgList[this.selectIndex].w
+            this.$set(this.imgList[this.selectIndex], "w", Number(this.gridWH.w));
+            this.$set(this.imgList[this.selectIndex], "h", this.imgList[this.selectIndex].h * r);
+          }else if(this.imgList[this.selectIndex].w < this.imgList[this.selectIndex].h) {
+            // // 高度铺满，宽度自适应
+            let r = Number(this.gridWH.h) / this.imgList[this.selectIndex].h
+            this.$set(this.imgList[this.selectIndex], "h", Number(this.gridWH.h));
+            this.$set(this.imgList[this.selectIndex], "w", this.imgList[this.selectIndex].w * r);
+          }else{
+            let r = Number(this.gridWH.w) / this.imgList[this.selectIndex].w
+            this.$set(this.imgList[this.selectIndex], "w", Number(this.gridWH.w));
+            this.$set(this.imgList[this.selectIndex], "h", this.imgList[this.selectIndex].h * r);
+          }
+          this.$set(this.imgList[this.selectIndex], "x", Number(w));
+          this.$set(this.imgList[this.selectIndex], "y", Number(h));
+          this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
+          break;
        case "center":
          this.$set(this.imgList[this.selectIndex], "x", Number(w));
          this.$set(this.imgList[this.selectIndex], "y", Number(h));
@@ -535,7 +557,8 @@ export default {
      }
      this.getCutArea();
    },
-    resizing() {},
+    resizing() {
+    },
    rotating(data, item) {
      this.$set(item, "r", data.angle);
      this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
@@ -657,7 +680,7 @@ export default {
            x,
            y,
            h: height_px,
-            r: 0,
+            r: 0
          });
          that.selectIndex = that.imgList.length - 1;
          that.showImgSetting = true;
@@ -691,7 +714,7 @@ export default {
            x: w,
            y: (bw * (2 / 3) * rate) / 2,
            h: bw * (2 / 3) * rate,
-            r: 0,
+            r: 0
          });
          console.log(570, that.imgList);
          that.selectIndex = that.imgList.length - 1;
@@ -717,7 +740,7 @@ export default {
        image.onload = function() {
          resolve({
            width: image.width,
-            height: image.height,
+            height: image.height
          });
        };
        image.onerror = function() {
@@ -796,14 +819,14 @@ export default {
              const outputPath = path.join(outputDir, outputFileName);
              const params = {
                inputPath: el.productionFile,
-                outputPath: outputPath,
+                outputPath: outputPath
              };
              const res = await this.$api.post("/processImage", params);
              fs.unlinkSync(el.productionFile);
              return {
                fileName: outputFileName,
                productionFile: res.msg[0]?.outputPath,
-                designId: el.designId,
+                designId: el.designId
              };
            } catch (error) {
              console.error(`处理失败: ${el.productionFile}`, error);
@@ -865,7 +888,7 @@ export default {
      let res = await this.$api.post("/downloadBySubOrderNumber", {
        ids: [this.detail.id],
        device: this.$store.state.desktopDevice,
-        type: this.factoryType,
+        type: this.factoryType
      });
      if (res.data.length === 0) return this.$message.warning("未找到素材图！");
      let imgList = [];
@@ -992,7 +1015,7 @@ export default {
      } catch (error) {
        console.log(error);
      }
-    },
+    }
  },
  mounted() {
    this.imgHeight = window.screen.height + "px";
@@ -1068,7 +1091,7 @@ export default {
  beforeDestroy() {
    // 销毁组件时移除事件监听器
    document.removeEventListener("click", this.handleClick);
-  },
+  }
 };
 </script>
@@ -1110,7 +1133,8 @@ export default {
                  v-if="selectImgList.length"
                  style="margin: 5px;"
                  @click="downloadImg"
-                  >下载原素材</el-button
+                >下载原素材
+                </el-button
                >
                <el-button
                  type="primary"
@@ -1118,7 +1142,8 @@ export default {
                  v-if="selectImgList.length"
                  style="margin: 5px;"
                  @click="cutImgFn"
-                  >裁切</el-button
+                >裁切
+                </el-button
                >
              </div>
            </template>
@@ -1490,6 +1515,7 @@ export default {
  font-size: 24px;
  left: 25%;
 }
 .page-main {
  display: flex;
  flex: 1;
@@ -1571,6 +1597,7 @@ export default {
  position: absolute;
  z-index: 2;
  left: 5%;
  img {
    pointer-events: none;
    width: auto;
@@ -1600,9 +1627,11 @@ export default {
    width: 100%;
    height: 100%;
  }
  .element {
    // position: relative;
  }
  // #imgBox {
  //   img {
  //     transition: clip-path 0.1s ease-in;
@@ -1656,11 +1685,13 @@ img {
  box-sizing: border-box;
  border-color: #409eff !important;
 }
 .showImg {
  max-height: 194px !important;
  text-align: center;
  width: auto !important;
 }
 .img-item {
  // height: 150px;
  width: 180px;
@@ -1675,10 +1706,12 @@ img {
  margin-right: 5px;
  box-sizing: border-box;
  img {
    width: 100%;
    height: auto;
  }
  span {
    font-size: 14px;
    // margin: 5px 0;
@@ -1708,6 +1741,7 @@ img {
  height: 100%;
  // border-top: 1px solid #ececec;
  margin-bottom: 25px;
  ::v-deep .el-checkbox {
    height: 100%;
    width: 100%;
@@ -1721,6 +1755,7 @@ img {
      top: 5px;
      left: 5px;
    }
    .el-checkbox__label {
      width: 100%;
      padding: 0;
@@ -1755,54 +1790,66 @@ img {
 .handle-rot::after {
  display: none;
 }
 .information-content {
  border: 1px solid #ececec;
  border-top: none;
  width: 100%;
  .main {
    margin: 5px;
    border: 1px solid #ececec;
    height: 100%;
    .effectPic {
      .img {
        width: 100%;
      }
    }
  }
  .pic-title {
    text-align: center;
  }
 }
 .product-information {
  border: 1px solid #ececec;
  border-top: none;
  .title {
    padding: 5px 10px;
  }
  .div-content {
    padding: 0 10px;
    display: flex;
    flex-wrap: wrap;
    .div-item {
      display: flex;
      flex: 50%;
      font-size: 12px;
      margin-bottom: 5px;
      .item-label {
        flex: 1;
        text-align: right;
      }
      .item-value {
        flex: 36%;
      }
    }
  }
 }
 .title {
  padding: 5px 10px;
  font-size: 20px;
  font-weight: 700;
 }
 .border-row {
  border-top: 1px solid #ececec;
  // border-bottom: 1px solid #ececec;
@@ -1811,36 +1858,44 @@ img {
  height: 100%;
  // align-items: center;
 }
 .full-width {
  width: 100%;
 }
 .text-center {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .border-col {
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
 }
 .boxShaow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 0, 0, 0.14),
  0 0 20px rgba(0, 0, 0, 0.12);
  position: relative;
  .left-bg-color {
    position: absolute;
    left: -57px;
  }
 }
 .vieWsucaitu {
  .active::before {
    display: none;
  }
  //::v-deep .drr:hover:before {
  //  outline: none;
  //}
 }
 // ::v-deep.el-table thead {
 //   color: black;
 // }