旋转后平移

src/views/Editor/modules/imageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2021-11-13 15:01:29
+ * @LastEditTime: 2021-11-13 16:29:53
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -1035,7 +1035,7 @@ export default {
       imageEditor.rotate(30);
       self.historys.push('旋转')
       let canvasImage = imageEditor._graphics.getCanvasImage()
-      $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg)`);
+      $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg)  scale(${self.zoomLevel})`);
 
       // 每次旋转时，位置都会改变，需要重新定位
       if (self.move_left && self.move_top) {
@@ -1054,7 +1054,7 @@ export default {
       self.isRightRotate = true
       imageEditor.rotate(-30);
       let canvasImage = imageEditor._graphics.getCanvasImage()
-      $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg)`)
+      $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg)  scale(${self.zoomLevel})`)
       self.historys.push('旋转')
 
       // 每次旋转时，位置都会改变，需要重新定位
@@ -1075,7 +1075,7 @@ export default {
         self.startPlace = self.inputRotationRange;
 
         // 特征点的图层也要跟着转
-        $('.tzdDrawing').css("transform", `rotate(${self.inputRotationRange}deg)`)
+        $('.tzdDrawing').css("transform", `rotate(${self.inputRotationRange}deg) scale(${self.zoomLevel})`)
 
       };
       $(document).on('mousemove', changeAngle);
@@ -1091,7 +1091,7 @@ export default {
       self.startPlace = self.inputRotationRange;
       self.historys.push('旋转')
       // 特征点的图层也要跟着转
-        $('.tzdDrawing').css("transform", `rotate(${self.inputRotationRange}deg)`)
+        $('.tzdDrawing').css("transform", `rotate(${self.inputRotationRange}deg) scale(${self.zoomLevel})`)
     });
 
     // 划线事件
@@ -1502,11 +1502,13 @@ export default {
         }, true)
         // console.log(imageEditor._graphics.getImageProperties());
         // console.log(imageEditor._graphics.getCanvasImage());
+        let canvasImage = imageEditor._graphics.getCanvasImage()
 
         // $('.tzdDrawing').css('left', `${originleft + (x2 - x1)}px`)
         // $('.tzdDrawing').css('top', `${origintop + (y2 - y1)}px`)
         // $('.tzdDrawing').css('transform', `translate(${x2 - x1}px,${y2 - y1}px)`)
-
+        
+        // TODO
         $('.tzdDrawing').css('transform', `translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)}px) scale(${self.zoomLevel})`)
 
         $('.tzdDrawing_2').css('transform', `translate(${Number(self.tzdDrawingLeft) + (x2 - x1)}px,${Number(self.tzdDrawingTop) + (y2 - y1)}px) scale(${self.zoomLevel})`)
@@ -3507,9 +3509,7 @@ export default {
       this.imageEditor.rotate(deg)
       let canvasImage = this.imageEditor._graphics.getCanvasImage()
       this.startPlace = newValue;
-      $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg)`)
-      // 特征点的图层也要跟着转
-      $('.tzdDrawing').css("transform", `rotate(${newValue}deg)`)
+      $('.tzdDrawing').css('transform', `rotate(${canvasImage.angle}deg) scale(${self.zoomLevel})`)
     },
     inputRemoveWhiteRange (newValue, oldValue) {
       this.imageEditor.applyFilter('removeColor', {

vue.config.js

 /*
  * @Author: your name
  * @Date: 2021-09-07 09:57:48
- * @LastEditTime: 2021-11-13 11:09:56
+ * @LastEditTime: 2021-11-13 15:40:37
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\vue.config.js