优化图片操作控制方式

hookehuyr
Commit 46673a81e024a33243353f6782608afdf264f6f4 46673a81 1 parent 0df36bf1
Showing 2 changed files with 189 additions and 6 deletions
components.d.ts
src/views/mapCutter.vue
--- a/components.d.ts
View file @46673a8
+++ b/components.d.ts
View file @46673a8
@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     Floor: typeof import('./src/components/Floor/index.vue')['default']
     InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
--- a/src/views/mapCutter.vue
View file @46673a8
+++ b/src/views/mapCutter.vue
View file @46673a8
 <!--
  * @Date: 2025-01-22 11:40:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-02-08 10:47:47
+ * @LastEditTime: 2025-02-08 14:14:42
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @Description: 文件描述
 -->
@@ -48,10 +48,13 @@
         v-model="img_ratio"
         style="width: 240px"
         placeholder="输入上传图片比例"
-      />
+      >
+      </el-input>
     </div>
     <div v-if="showUpload">
-      <input type="file" @change="handleImageUpload" />
+      <!-- 触发上传按钮 -->
+      <el-button type="primary" @click="triggerFileInput">上传图片</el-button>
+      <input ref="fileInput" type="file" @change="handleImageUpload" style="display: none" />&nbsp;
       <el-button type="primary" @click="cutTiles">切割瓦片</el-button>
     </div>
   </div>
@@ -59,7 +62,7 @@
   <div>
   </div>
-  <div v-if="showUpload" class="controls">
+  <!-- <div v-if="showUpload" class="controls">
     <el-button type="primary" :icon="Top" @click="moveImage('up')">图片上移</el-button>
     <el-button type="primary" :icon="Bottom" @click="moveImage('down')">图片下移</el-button>
     <el-button type="primary" :icon="Back" @click="moveImage('left')">图片左移</el-button>
@@ -68,15 +71,42 @@
     <el-button type="primary" :icon="Minus" @click="scaleImage(0.99)">图片缩小</el-button>
     <el-button type="primary" @click="rotateMap(10)">地图顺时针旋转</el-button>
     <el-button type="primary" @click="rotateMap(-10)">地图逆时针旋转</el-button>
-  </div>
+  </div> -->
   <div v-if="log_lnglat" style="position: fixed; top: 8rem; left: 1rem; color: black; background-color: white; padding: 1rem;">
     <div style=" display: flex; align-items: center; justify-content: center;">经纬度：{{ log_lnglat }}&nbsp;&nbsp;&nbsp;<el-button @click="copyText(log_lnglat)" type="primary" :icon="Brush"  size="small">复制</el-button></div>
   </div>
+
+  <div v-if="showUpload" class="controls-container">
+    <!-- 遥控器界面 -->
+    <div class="remote-control">
+      <!-- 方向控制 -->
+      <div class="direction-control">
+        <button class="z-button" @click="moveImage('up')">↑</button>
+        <div class="horizontal">
+          <button class="z-button" @click="moveImage('left')">←</button>
+          <button class="z-button" @click="moveImage('right')">→</button>
+        </div>
+        <button class="z-button" @click="moveImage('down')">↓</button>
+      </div>
+
+      <!-- 缩放控制 -->
+      <div class="zoom-control">
+        <button class="z-button" @click="scaleImage(1.01)">+</button>
+        <button class="z-button" @click="scaleImage(0.99)">-</button>
+      </div>
+
+      <!-- 旋转控制 -->
+      <div class="rotate-control">
+        <button class="z-button" @click="rotateMap(10)">↺</button>
+        <button class="z-button" @click="rotateMap(-10)">↻</button>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup>
-import { onMounted, ref, computed } from "vue";
+import { onMounted, ref, computed, onBeforeUnmount } from "vue";
 // import AMapLoader from "@amap/amap-jsapi-loader";
 import { TileCutter } from "@/utils/TileCutter";
 import { Top, Bottom, Back, Right, Plus, Minus, Brush } from '@element-plus/icons-vue'
@@ -110,10 +140,51 @@ const map_center = ref(null);
 const log_lnglat = ref('') // 获取当前地址经纬度
+const fileInput = ref(null); // 绑定隐藏的 input 元素
+
+// 触发文件选择
+const triggerFileInput = () => {
+  fileInput.value.click();
+};
+
+const handleKeydown = (e) => { // 键盘控制
+  switch(e.key) {
+    case 'ArrowUp':
+      moveImage('up')
+      break
+    case 'ArrowDown':
+      moveImage('down')
+      break
+    case 'ArrowLeft':
+      moveImage('left')
+      break
+    case 'ArrowRight':
+      moveImage('right')
+      break
+    case '+':
+      scaleImage(1.01)
+      break
+    case '-':
+      scaleImage(0.99)
+      break
+    case 'r':
+      rotateMap(10)
+      break
+    case 'R':
+      rotateMap(-10)
+      break
+  }
+}
+
 onMounted(async () => {
   loadMap();
+  window.addEventListener('keydown', handleKeydown)
 });
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeydown)
+})
+
 function loadMap() {
   // 初始化地图
   map.value = new AMap.Map('map-container', {
@@ -357,6 +428,61 @@ const copyText = (text) => {
     console.error('复制失败:', err);
   });
 }
+
+// 控制对象的状态
+const position = ref({ x: 0, y: 0 })
+const scale = ref(1)
+const rotation = ref(0)
+
+// 移动步长
+const MOVE_STEP = 10
+// 缩放比例
+const ZOOM_FACTOR = 1.2
+// 旋转步长
+const ROTATE_STEP = 30
+
+// 移动控制
+const move = (direction) => {
+  switch(direction) {
+    case 'up':
+      position.value.y -= MOVE_STEP
+      break
+    case 'down':
+      position.value.y += MOVE_STEP
+      break
+    case 'left':
+      position.value.x -= MOVE_STEP
+      break
+    case 'right':
+      position.value.x += MOVE_STEP
+      break
+  }
+}
+
+// 放大
+const zoomIn = () => {
+  scale.value *= ZOOM_FACTOR
+}
+
+// 缩小
+const zoomOut = () => {
+  scale.value /= ZOOM_FACTOR
+}
+
+// 旋转
+const rotate = (angle) => {
+  rotation.value += angle
+}
+
+// 组合样式
+const objectStyle = computed(() => ({
+  transform: `
+    translate(${position.value.x}px, ${position.value.y}px)
+    scale(${scale.value})
+    rotate(${rotation.value}deg)
+  `,
+  transition: 'transform 0.3s ease-in-out'
+}))
 </script>
 <style>
@@ -374,4 +500,60 @@ const copyText = (text) => {
   border-radius: 5px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
+
+
+.controls-container {
+  position: absolute;
+  top: 8rem;
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.remote-control {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: #f0f0f0;
+  border-radius: 10px;
+}
+
+.direction-control {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+}
+
+.horizontal {
+  display: flex;
+  gap: 5px;
+}
+
+button.z-button {
+  width: 50px;
+  height: 50px;
+  font-size: 20px;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background: white;
+  transition: all 0.2s;
+}
+
+button.z-button:hover {
+  background: #e0e0e0;
+}
+
+button.z-button:active {
+  transform: scale(0.95);
+}
+
+.zoom-control, .rotate-control {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
 </style>