Просмотр исходного кода

fix: 修复小地图相机拖放问题,只能在画布内部拖放

louhangfei 1 год назад
Родитель
Сommit
c9d6a11fe4
1 измененных файлов с 43 добавлено и 5 удалено
  1. 43 5
      src/views/map-config/mini-map/MapBase/KonvaMap.vue

+ 43 - 5
src/views/map-config/mini-map/MapBase/KonvaMap.vue

@@ -283,12 +283,50 @@
    * @author chauncey
    */
   function dymamicdragBoundFunc(configWidth: number, configHeight: number) {
-    return (pos: { x: number; y: number }) => {
-      const RestrictedX = Math.max(0, Math.min(bgConfig.value.width - configWidth, pos.x));
-      const RestrictedY = Math.max(0, Math.min(bgConfig.value.height - configHeight, pos.y));
+    return function (pos: { x: number; y: number }) {
+      const scaleX = this.attrs.scaleX;
+      const scaleY = this.attrs.scaleY;
+      const width = cameraIconSize.width;
+      const height = cameraIconSize.height;
+      const rotation = (this.attrs.rotation * Math.PI) / 180; // 转换为弧度
+
+      // 计算旋转和缩放后的四个角点相对于左上角的偏移
+      const points = [
+        { x: 0, y: 0 }, // 左上
+        { x: width * scaleX, y: 0 }, // 右上
+        { x: width * scaleX, y: height * scaleY }, // 右下
+        { x: 0, y: height * scaleY }, // 左下
+      ].map((p) => {
+        // 先应用旋转变换
+        const rotatedX = p.x * Math.cos(rotation) - p.y * Math.sin(rotation);
+        const rotatedY = p.x * Math.sin(rotation) + p.y * Math.cos(rotation);
+        return {
+          x: rotatedX,
+          y: rotatedY,
+        };
+      });
+
+      // 计算变换后的边界框
+      const minX = Math.min(...points.map((p) => p.x));
+      const maxX = Math.max(...points.map((p) => p.x));
+      const minY = Math.min(...points.map((p) => p.y));
+      const maxY = Math.max(...points.map((p) => p.y));
+
+      // 计算边界框的尺寸
+      const boxWidth = maxX - minX;
+      const boxHeight = maxY - minY;
+
+      // 计算相对于变换原点的偏移
+      const offsetX = -minX;
+      const offsetY = -minY;
+
+      // 限制位置,确保完全在画布内
+      const restrictedX = Math.max(0 + offsetX, Math.min(bgConfig.value.width - boxWidth + offsetX, pos.x));
+      const restrictedY = Math.max(0 + offsetY, Math.min(bgConfig.value.height - boxHeight + offsetY, pos.y));
+
       return {
-        x: RestrictedX,
-        y: RestrictedY,
+        x: restrictedX,
+        y: restrictedY,
       };
     };
   }