Quellcode durchsuchen

feat(photography): 添加自动对焦功能

- 在相机预览界面添加自动对焦按钮
- 实现handleAutoFocus函数处理自动对焦逻辑
- 通过socket发送自动对焦指令到后端
- 添加自动对焦按钮的样式定义
- 按钮定位在预览图像右上角位置
- 支持悬停效果和点击交互
panqiuyao vor 5 Tagen
Ursprung
Commit
de6f43c3ec
1 geänderte Dateien mit 29 neuen und 0 gelöschten Zeilen
  1. 29 0
      frontend/src/views/Photography/check.vue

+ 29 - 0
frontend/src/views/Photography/check.vue

@@ -23,6 +23,9 @@
             <div class="camera-preview  flex col center ">
               <div class="camera-preview-img" v-if="step === 1">
                 <img v-if="previewKey" class="camera-img" :src="previewSrc" />
+                <div class="auto-focus-btn" @click="handleAutoFocus">
+                  <span>自动对焦</span>
+                </div>
                 <div class="example-image flex-col" v-if="!isSetting && previewKey > 1">
                   <img :src="exampleImage">
                 </div>
@@ -289,6 +292,16 @@ async function switchPreviewPoint(point_name = 'A') {
 function goArts(){
 
 }
+
+function handleAutoFocus() {
+  console.log('自动对焦,点位:' + currentPointName.value)
+  socketStore.sendMessage({
+    type: 'smart_shooter_auto_focus',
+    data: {
+      point_name: currentPointName.value || 'A'
+    }
+  });
+}
 const loading = ref(true)
 const editData = ref(null);
 const imageTplPath = ref(null)
@@ -519,6 +532,22 @@ onBeforeUnmount(() => {
             position: relative;
           }
 
+          .auto-focus-btn {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            z-index: 10;
+            background: rgba(64, 158, 255, 0.9);
+            color: #fff;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            &:hover {
+              background: rgba(64, 158, 255, 1);
+            }
+          }
+
           .camera-img {
           //  width: 100%;
             display: block;