人员旋转

src/views/Editor/modules/imageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2021-11-06 15:12:14
+ * @LastEditTime: 2021-11-09 10:03:02
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -1011,6 +1011,16 @@ export default {
       self.historys.push('旋转')
       let canvasImage = imageEditor._graphics.getCanvasImage()
       $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg)`);
+
+      // 每次旋转时，位置都会改变，需要重新定位
+      if (self.move_left && self.move_top) {
+        imageEditor._graphics.setImageProperties({
+          left: self.move_left + canvasImage.left,
+          top: self.move_top + canvasImage.top,
+          originX: 'left',
+          originY: 'top'
+        }, true)
+      }
     });
     // 向右旋转30°
     $btnRotateCounterClockWise.on('click', function () {
@@ -1021,6 +1031,16 @@ export default {
       let canvasImage = imageEditor._graphics.getCanvasImage()
       $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg)`)
       self.historys.push('旋转')
+
+      // 每次旋转时，位置都会改变，需要重新定位
+      if (self.move_left && self.move_top) {
+        imageEditor._graphics.setImageProperties({
+          left: self.move_left + canvasImage.left,
+          top: self.move_top + canvasImage.top,
+          originX: 'left',
+          originY: 'top'
+        }, true)
+      }
     });
     // 滑动旋转事件
     $inputRotationRange.on('mousedown', function () {
@@ -1383,6 +1403,9 @@ export default {
 
         $('.tzdDrawing').css('transform', `translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)}px) scale(${self.zoomLevel})`)
 
+        self.move_left = originleft + ((x2 - x1) * self.newWidth / self.canvasWidth / self.zoomLevel)
+        self.move_top = origintop + ((y2 - y1) * self.newHeight / self.canvasHeight / self.zoomLevel)
+
         // $('.tzdDrawing').css('transform', `translate(${(originleft + (x2 - x1))/16}rem,${(origintop + (y2 - y1))/16}rem) scale(${self.zoomLevel})`)
       }
       // console.log(self.mouseEnlarge);

src/views/Editor/modules/imageEdAJ.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2021-11-08 20:41:53
+ * @LastEditTime: 2021-11-08 21:00:49
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -1007,12 +1007,15 @@ export default {
       $('.tzdDrawing').css('transform', 'rotateX(0)')
       $('.tzdDrawing').css('transform', 'rotateY(0)')
       // imageEditor.resetZoom()
+      let canvasImage = imageEditor._graphics.getCanvasImage()
       imageEditor._graphics.setImageProperties({
         left: 0,
         top: 0,
-        originX: 'left',
-        originY: 'top'
+        originX: 'center',
+        originY: 'center'
       }, true)
+      
+      console.log(canvasImage);
     });
 
     // 向左旋转30°
@@ -1028,7 +1031,7 @@ export default {
 
       console.log(self.move_left);
       console.log(self.move_top);
-      
+
       // 每次旋转时，位置都会改变，需要重新定位
       if (self.move_left && self.move_top) {
         imageEditor._graphics.setImageProperties({
@@ -1202,7 +1205,7 @@ export default {
       self.isTpdr_flag = true
 
       file = event.target.files[0];
-      console.log(file,222222222);
+      console.log(file, 222222222);
       imageEditor.loadImageFromFile(file).then(function (result) {
         console.log(result);
         self.newHeight = result.newHeight
@@ -1412,12 +1415,12 @@ export default {
       }
       // console.log(self.mouseEnlarge);
       if (self.mouseEnlarge) {
-        imageEditor._graphics.setImageProperties({
-          left: 0,
-          top: 0,
-          originX: 'left',
-          originY: 'top'
-        }, true)
+        // imageEditor._graphics.setImageProperties({
+        //   left: 0,
+        //   top: 0,
+        //   originX: 'left',
+        //   originY: 'top'
+        // }, true)
         // 放大
         if (e.clientY <= originPointer.y) {
           self.zoomLevel = self.zoomLevel + 0.01