perf: 旋转后元素缩放控制点鼠标指针优化

src/views/Editor/Canvas/Operate/ImageElementOperate.vue

@@ -13,6 +13,7 @@
         v-for="point in resizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />

src/views/Editor/Canvas/Operate/ResizeHandler.vue

@@ -1,20 +1,43 @@
 <template>
-  <div :class="['resize-handler', type]"></div>
+  <div :class="['resize-handler', rotateClassName, type]"></div>
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue'
+import { computed, defineComponent, PropType } from 'vue'
 import { OperateResizeHandler } from '@/types/edit'
 
-export default {
+export default defineComponent({
   name: 'resize-handler',
   props: {
     type: {
       type: String as PropType<OperateResizeHandler>,
       default: '',
     },
+    rotate: {
+      type: Number,
+      default: 0,
+    },
   },
-}
+  setup(props) {
+    const rotateClassName = computed(() => {
+      const prefix = 'rotate-'
+      const rotate = props.rotate
+      if (rotate > -22.5 && rotate <= 22.5) return prefix + 0
+      else if (rotate > 22.5 && rotate <= 67.5) return prefix + 45
+      else if (rotate > 67.5 && rotate <= 112.5) return prefix + 90
+      else if (rotate > 112.5 && rotate <= 157.5) return prefix + 135
+      else if (rotate > 157.5 || rotate <= -157.5) return prefix + 0
+      else if (rotate > -157.5 && rotate <= -112.5) return prefix + 45
+      else if (rotate > -112.5 && rotate <= -67.5) return prefix + 90
+      else if (rotate > -67.5 && rotate <= -22.5) return prefix + 135
+      return prefix + 0
+    })
+
+    return {
+      rotateClassName,
+    }
+  },
+})
 </script>
 
 <style lang="scss" scoped>
@@ -29,29 +52,45 @@ export default {
   background-color: #fff;
   border-radius: 1px;
 
-  &.left-top {
+  &.left-top.rotate-0,
+  &.right-bottom.rotate-0,
+  &.left.rotate-45,
+  &.right.rotate-45,
+  &.left-bottom.rotate-90,
+  &.right-top.rotate-90,
+  &.top.rotate-135,
+  &.bottom.rotate-135 {
     cursor: nwse-resize;
   }
-  &.top {
+  &.top.rotate-0,
+  &.bottom.rotate-0,
+  &.left-top.rotate-45,
+  &.right-bottom.rotate-45,
+  &.left.rotate-90,
+  &.right.rotate-90,
+  &.left-bottom.rotate-135,
+  &.right-top.rotate-135 {
     cursor: ns-resize;
   }
-  &.right-top {
+  &.left-bottom.rotate-0,
+  &.right-top.rotate-0,
+  &.top.rotate-45,
+  &.bottom.rotate-45,
+  &.left-top.rotate-90,
+  &.right-bottom.rotate-90,
+  &.left.rotate-135,
+  &.right.rotate-135 {
     cursor: nesw-resize;
   }
-  &.left {
+  &.left.rotate-0,
+  &.right.rotate-0,
+  &.left-bottom.rotate-45,
+  &.right-top.rotate-45,
+  &.top.rotate-90,
+  &.bottom.rotate-90,
+  &.left-top.rotate-135,
+  &.right-bottom.rotate-135 {
     cursor: ew-resize;
   }
-  &.right {
-    cursor: ew-resize;
-  }
-  &.left-bottom {
-    cursor: nesw-resize;
-  }
-  &.bottom {
-    cursor: ns-resize;
-  }
-  &.right-bottom {
-    cursor: nwse-resize;
-  }
 }
 </style>

src/views/Editor/Canvas/Operate/ShapeElementOperate.vue

@@ -13,6 +13,7 @@
         v-for="point in resizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />

src/views/Editor/Canvas/Operate/TextElementOperate.vue

@@ -13,6 +13,7 @@
         v-for="point in textElementResizeHandlers"
         :key="point.direction"
         :type="point.direction"
+        :rotate="elementInfo.rotate"
         :style="point.style"
         @mousedown.stop="$event => scaleElement($event, elementInfo, point.direction)"
       />