人脸放大展示+人员指纹编辑特征点缩放+平移调整

src/store/modules/mutations-types.js

 /*
  * @Author: your name
  * @Date: 2021-11-04 13:14:49
- * @LastEditTime: 2021-12-02 21:14:19
+ * @LastEditTime: 2021-12-03 10:30:40
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\store\modules\mutations-types.js
@@ -36,3 +36,5 @@ export const SET_SMALLLOADING = 'setSmallLoading'
 export const SET_RXINFO = 'setRxInfo'
 // 是否放大人像
 export const SET_ENLARGEFACE = 'setEnlargeFace'
+// 设置单个人像信息
+export const SET_RXINFOENLARGE = 'setRxInfoEnlarge'

src/store/modules/ryzwbj.js

 /*
  * @Author: your name
  * @Date: 2021-11-04 11:12:33
- * @LastEditTime: 2021-12-02 21:14:25
+ * @LastEditTime: 2021-12-03 10:41:41
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\store\modules\zwbj.js
  */
-import { SET_RXINFO, SET_ENLARGEFACE } from "./mutations-types";
+import { SET_RXINFO, SET_ENLARGEFACE, SET_RXINFOENLARGE } from "./mutations-types";
 const state = {
   // 人像信息
   rxInfo: [],
+  // 单个人像信息
+  rxInfoEnlarge: {},
 	// 是否放大人像
 	enLargeFace: false
 };
@@ -21,6 +23,9 @@ const mutations = {
 	[SET_ENLARGEFACE] (state, content) {
     state.enLargeFace = content
   },
+  [SET_RXINFOENLARGE] (state, content) {
+    state.rxInfoEnlarge = content
+  },
 };
 
 const actions = {

src/views/Editor/modules/imageEd.scss

@@ -999,7 +999,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
                 align-items: center;
                 justify-content: center;
                 &:hover {
-                  border: 1px solid #055FE7;
+                  border: 1px solid #055fe7;
                   box-shadow: 0px 10px 30px 2px rgba(0, 0, 0, 0.16);
                 }
                 img {

src/views/Editor/modules/imageEdAJ.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2021-12-03 02:08:29
+ * @LastEditTime: 2021-12-03 11:20:56
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -933,6 +933,7 @@ export default {
       originY: 0,
       // 记录session的个数
       sessionCount: 0,
+      // 记录特征点图层上次停留的位置
       tzdDrawingLeft_yd: 0,
       tzdDrawingTop_yd: 0
     };
@@ -2708,6 +2709,7 @@ export default {
           let canvasImage = imageEditor._graphics.getCanvasImage();
           console.log(canvasImage);
 
+          // 要计算canvas的在偏移角度的  坐标转换，用于 特征点图层 的translate  transform-origin
           if (canvasImage.angle) {
             let src = {
               x: canvasImage.left,
@@ -2792,7 +2794,8 @@ export default {
           // $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
           // document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
           let canvasImage = imageEditor._graphics.getCanvasImage();
-
+          
+          // 要计算canvas的在偏移角度的  坐标转换，用于 特征点图层 的translate  transform-origin
           if (canvasImage.angle) {
             let src = {
               x: canvasImage.left,
@@ -2986,6 +2989,8 @@ export default {
       // console.log($('.tzdDrawing').css("transform").replace(/[^0-9\-,]/g,'').split(','));
       console.log($('.tzdDrawing').css("transform"));
       // console.log(cssTransform(document.querySelector('.tzdDrawing'), 'translate'));
+
+      // 存储 特征点图层 在最后停下的位置 ---- 用于加在拖拽平移的基础上。
       let transformMatrix = $(".tzdDrawing").css("transform").substring(7, $(".tzdDrawing").css("transform").length - 1).split(',')
       console.log(transformMatrix);
       self.tzdDrawingLeft_yd = transformMatrix[4];

src/views/Editor/modules/ryzwbjLeft.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 09:42:07
- * @LastEditTime: 2021-12-02 20:36:39
+ * @LastEditTime: 2021-12-03 11:29:52
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
@@ -424,7 +424,8 @@ export default {
             })
           })
         }
-        self.$store.commit('ryzwbj/setRxInfo', self.faceData)
+        // self.$store.commit('ryzwbj/setRxInfo', self.faceData)
+        self.$bus.emit('setRxInfo', self.faceData)
         self.isFaceRequest = true
       })
     },
@@ -828,6 +829,7 @@ export default {
         }
         // 传入判断，为掌纹则开启图像编辑的功能
         this.$bus.emit('isFace', false)
+        this.$bus.emit('zwType', '掌纹')
       } else if (this.zwSelect === '人像') {
         // 获取人脸数据
         this.getFaceData()
@@ -857,6 +859,7 @@ export default {
     this.$bus.off('ryzwbjType');
     this.$bus.off('ryzwbjTDZ');
     this.$bus.off('zwType');
+    this.$bus.off('setRxInfo')
   },
   watch: {
     zwSelect (newValue, oldValue) {

src/views/Home.vue

@@ -109,9 +109,12 @@
     </div>
 
     <!-- 人像 -->
-    <div class="face-big" v-show="enLargeFace">
-      <img src="@/assets/img/下载.jpg" alt="">
-    </div>
+    <transition name="el-fade-in-linear">
+      <div class="face-big" v-show="enLargeFace">
+        <div class="face-name">{{rxInfoEnlarge.name}}</div>
+        <img class="face-img" :src="'data:image/jpeg;base64,'+rxInfoEnlarge.image" alt="">
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -142,6 +145,8 @@ export default {
       jumpRouteDialogVisible: false,
       // 路由跳转的方式----- 1.面包屑切换。2.面包屑删除当前。3.左侧菜单跳转
       routeChangeType: "change",
+      // 人像信息
+      rxInfoEnlarge: {}
     };
   },
   mounted () {
@@ -157,8 +162,8 @@ export default {
       }
     });
 
-    console.log(this.smallLoading);
-
+    // 初始化人像是否放大
+    self.$store.commit('ryzwbj/setEnlargeFace', false)
     document.querySelector('.shadow').addEventListener('click', function(e) {
       // 如果图像是处于放大状态
       if(self.enLargeFace) {
@@ -166,6 +171,13 @@ export default {
         self.$store.commit('ryzwbj/setEnlargeFace', false)
       }
     })
+
+    // 获取放大的人像信息
+    this.$bus.on('setRxInfoEnlarge', (rxInfoEnlarge) => {
+      console.log(11111111111);
+      self.rxInfoEnlarge = rxInfoEnlarge
+    })
+
   },
   updated () {
     this.menuActive = this.$route.name;
@@ -178,7 +190,7 @@ export default {
       willRoute: (state) => state.loading.willRoute,
       jumproute: (state) => state.loading.jumproute,
       smallLoading: (state) => state.loading.smallLoading,
-      enLargeFace: (state) => state.loading.enLargeFace,
+      enLargeFace: (state) => state.ryzwbj.enLargeFace,
     }),
     cachePageName () {
       return this.$store.state.layout.cachePageName;
@@ -454,6 +466,9 @@ export default {
     
   },
   watch: {
+    enLargeFace (newValue, oldValue) {
+      console.log(newValue);
+    },
     menuActive (newValue, oldValue) {
       console.log(newValue);
     },
@@ -509,14 +524,29 @@ export default {
 <style scoped lang="scss">
 // 人像
 .face-big {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 543px;
-  height: 722px;
-  box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16);
-  border-radius: 8px;
-  border: 1px solid #CCCCCC;
+  z-index: 999;
+  position: fixed;
+  top: calc(50% - 361px);
+  left: calc(50% - 271.5px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .face-name {
+    font-size: 16px;
+    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+    font-weight: bold;
+    color: #333333;
+    margin-bottom: 6px;
+  }
+  .face-img {
+    width: 543px;
+    height: 722px;
+    box-shadow: 0px 14px 30px 2px rgba(0, 21, 51, 0.16);
+    border-radius: 8px;
+    border: 1px solid #CCCCCC;
+    background: #ffffff;
+  }
 }
 
 /deep/.dialog-footer {