优化图片在网格中展示情况，超过网格图片进行遮蔽，目前不支持旋转

package.json

@@ -29,6 +29,7 @@
     "electron-updater": "^6.2.1",
     "electron-updater": "^6.2.1",
     "element-ui": "^2.13.0",
     "element-ui": "^2.13.0",
     "express": "^4.17.1",
     "express": "^4.17.1",
+    "fabric": "^5.2.4",
     "html2canvas": "^1.4.1",
     "html2canvas": "^1.4.1",
     "lodash-id": "^0.14.0",
     "lodash-id": "^0.14.0",
     "log4js": "^6.9.1",
     "log4js": "^6.9.1",

src/components/vueDrag.vue

@@ -87,7 +87,7 @@ export default {
     },
     },
     rotating(data, item) {
     rotating(data, item) {
       console.log(data);
       console.log(data);
-      this.$set(item, "r", data.angle.toFixed(2));
+      this.$set(item, "r", data.angle);
       this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
       this.imgHistoryList.push(JSON.parse(JSON.stringify(this.imgList)));
     },
     },
   },
   },

src/store/index.js

@@ -14,6 +14,7 @@ export default new Vuex.Store({
     actionList: [],
     actionList: [],
     imgList: [],
     imgList: [],
     productDetail: {},
     productDetail: {},
+    windowWH: { width: 0, height: 0 },
     desktopDevice: 1, //1是兄弟，2是其他
     desktopDevice: 1, //1是兄弟，2是其他
     WHproportion: 1, //宽高比例
     WHproportion: 1, //宽高比例
     defaultProportion: 1,
     defaultProportion: 1,
@@ -90,6 +91,9 @@ export default new Vuex.Store({
         }
         }
       });
       });
     },
     },
+    setWindows(state, { width, height }) {
+      state.windowWH = { width, height };
+    },
   },
   },
   getters: {
   getters: {
     systemSetting(state) {
     systemSetting(state) {

src/views/design/head/printDialog.vue

@@ -292,9 +292,9 @@ export default {
       });
       });
     },
     },
     return_data() {
     return_data() {
-      let dom_id = `${this.imgList[0].fileName}_0`;
-
-      const image = document.getElementById(dom_id);
+      // let dom_id = `${this.imgList[0].fileName}_0`;
+      // const image = document.getElementById(dom_id);
+      const image = document.getElementById("imgBox");
       const line = document.getElementById("line");
       const line = document.getElementById("line");
 
 
       // 使用getBoundingClientRect获取更精确的位置信息
       // 使用getBoundingClientRect获取更精确的位置信息

src/views/design/main/imgSetting.vue

@@ -51,7 +51,7 @@ export default {
             "position_before_px",
             "position_before_px",
             JSON.parse(JSON.stringify(this.item))
             JSON.parse(JSON.stringify(this.item))
           );
           );
-          console.log("setting", setting);
+          // console.log("setting", setting);
 
 
           let x_mm, w_mm, h_mm, y_mm;
           let x_mm, w_mm, h_mm, y_mm;
           x_mm = this.pxToUnit(this.item.x);
           x_mm = this.pxToUnit(this.item.x);
@@ -219,8 +219,7 @@ export default {
           <el-col :span="8">
           <el-col :span="8">
             <el-form-item label="z：">
             <el-form-item label="z：">
               <div class="form-content">
               <div class="form-content">
-                <el-input @blur="formChange" v-model="form.zIndex">
-                </el-input>
+                <el-input @blur="formChange" v-model="form.zIndex"> </el-input>
                 <div class="set-value">
                 <div class="set-value">
                   <i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
                   <i @click="addValue('zIndex')" class="el-icon-arrow-up"></i>
                   <i
                   <i

src/views/login/index.vue

@@ -40,7 +40,7 @@ export default {
       } else {
       } else {
         proportion = 1;
         proportion = 1;
       }
       }
-
+      this.$store.commit("setWindows", { width, height });
       this.$store.commit("setWHproportion", proportion);
       this.$store.commit("setWHproportion", proportion);
       this.$store.commit("setGrid");
       this.$store.commit("setGrid");
     });
     });