交互方式修改

src/components/BowTargetEdit.vue

@@ -27,8 +27,6 @@ const isDragging = ref(false);
 const dragStartPos = ref({ x: 0, y: 0 });
 const capsuleHeight = ref(0);
 const scale = ref(1);
-const zoomPos = ref({ x: 0, y: 0 });
-const targetPos = ref({ x: 0, y: 0 });
 let lastMoveTime = 0;
 
 // 点击靶纸创建新的点
@@ -40,21 +38,14 @@ const onClick = async (e) => {
   ) {
     return;
   }
-
+  if (props.id === 7 || props.id === 9) {
+    scale.value = 1.5;
+  }
   const newArrow = {
-    x: e.detail.x - zoomPos.value.x - 6 / scale.value,
+    x: (e.detail.x - 6) * scale.value,
-    y:
+    y: (e.detail.y - rect.value.top - capsuleHeight.value - 6) * scale.value,
-      e.detail.y -
-      rect.value.top -
-      capsuleHeight.value -
-      zoomPos.value.y -
-      6 / scale.value,
   };
 
-  targetPos.value = {
-    x: zoomPos.value.x,
-    y: zoomPos.value.y,
-  };
   const side = rect.value.width;
   newArrow.ring = calcRing(
     props.id,
@@ -72,10 +63,6 @@ const onClick = async (e) => {
 // 确认添加箭矢
 const confirmAdd = () => {
   if (props.onChange) {
-    targetPos.value = {
-      x: zoomPos.value.x,
-      y: zoomPos.value.y,
-    };
     props.onChange({
       x: arrow.value.x / scale.value,
       y: arrow.value.y / scale.value,
@@ -83,15 +70,13 @@ const confirmAdd = () => {
     });
   }
   arrow.value = null;
+  scale.value = 1;
 };
 
 // 删除箭矢
 const deleteArrow = () => {
   arrow.value = null;
-  targetPos.value = {
+  scale.value = 1;
-    x: zoomPos.value.x,
-    y: zoomPos.value.y,
-  };
 };
 
 // 开始拖拽 - 同样修复坐标获取
@@ -142,21 +127,17 @@ const onDrag = async (e) => {
 const endDrag = (e) => {
   isDragging.value = false;
 };
-const onScale = (e) => {
-  lastMoveTime = Date.now();
-  const lastScale = scale.value;
-  scale.value = e.detail.scale;
-  zoomPos.value = { x: e.detail.x, y: e.detail.y };
-  if (arrow.value) {
-    arrow.value.x = arrow.value.x * (scale.value / lastScale);
-    arrow.value.y = arrow.value.y * (scale.value / lastScale);
-  }
-};
 
-const onMove = (e) => {
+const getNewPos = () => {
-  if (e.detail.source) {
+  if (props.id === 7 || props.id === 9) {
-    zoomPos.value = { x: e.detail.x, y: e.detail.y };
+    if (arrow.value.y > 1.4)
+      return { left: "-12px", bottom: "calc(50% - 12px)" };
+  } else {
+    if (arrow.value.y > 0.88) {
+      return { left: "-12px", bottom: "calc(50% - 12px)" };
     }
+  }
+  return { left: "calc(50% - 12px)", bottom: "-12px" };
 };
 
 onMounted(async () => {
@@ -174,20 +155,11 @@ onMounted(async () => {
     @touchmove="onDrag"
     @touchend="endDrag"
   >
-    <movable-area class="move-area" scale-area>
+    <movable-area
-      <movable-view
+      class="move-area"
-        class="move-view"
+      :style="{
-        direction="all"
+        transform: scale > 1 ? `scale(${scale}) translateY(16.7%)` : '',
-        scale
+      }"
-        :x="targetPos.x"
-        :y="targetPos.y"
-        :scale-min="1"
-        :scale-max="2"
-        :scale-value="scale"
-        :animation="false"
-        @scale="onScale"
-        @change="onMove"
-        :out-of-bounds="true"
     >
       <image :src="src" mode="widthFix" />
       <view
@@ -202,6 +174,9 @@ onMounted(async () => {
         <view
           v-if="arrow.x !== undefined && arrow.y !== undefined"
           class="point"
+          :style="{
+            transform: props.id === 7 || props.id === 9 ? 'scale(0.7)' : '',
+          }"
         >
           <text>{{ index + 1 }}</text>
         </view>
@@ -215,42 +190,43 @@ onMounted(async () => {
         :x="arrow ? (rect.width * arrow.x) / scale : 0"
         :y="arrow ? (rect.width * arrow.y) / scale : 0"
       >
-          <view class="point"> </view>
+        <view
+          class="point"
+          :style="{ transform: scale > 1 ? `scale(${1 / scale})` : '' }"
+        >
+        </view>
         <view
           v-if="arrow"
           class="edit-buttons"
           @touchstart.stop
-            :style="{ transform: `scale(${1 / scale})` }"
+          :style="{ transform: scale > 1 ? `scale(${1 / scale})` : '' }"
         >
           <view class="edit-btn-text">
-              <!-- <text v-if="arrow.ring === 0" :style="{ width: '100%' }"
-                >未上靶</text
-              > -->
             <text>{{ arrow.ring === 0 ? "M" : arrow.ring }}</text>
-              <!-- <text
+            <text
               v-if="arrow.ring > 0"
               :style="{
                 fontSize: '16px',
                 marginLeft: '2px',
               }"
               >环</text
-              > -->
+            >
           </view>
-            <view class="edit-btn confirm-btn" @touchstart.stop="confirmAdd">
+          <view
+            class="edit-btn confirm-btn"
+            @touchstart.stop="confirmAdd"
+            :style="{ ...getNewPos() }"
+          >
             <image src="../static/arrow-edit-save.png" mode="widthFix" />
           </view>
           <view class="edit-btn delete-btn" @touchstart.stop="deleteArrow">
             <image src="../static/arrow-edit-delete.png" mode="widthFix" />
           </view>
-            <view
+          <view class="edit-btn drag-btn" @touchstart.stop="startDrag($event)">
-              class="edit-btn drag-btn"
-              @touchstart.stop="startDrag($event)"
-            >
             <image src="../static/arrow-edit-move.png" mode="widthFix" />
           </view>
         </view>
       </movable-view>
-      </movable-view>
     </movable-area>
   </view>
 </template>
@@ -259,14 +235,25 @@ onMounted(async () => {
 .container {
   width: 100vw;
   height: 100vw;
-  overflow: hidden;
+  overflow-x: hidden;
-  transform: translateY(-10px);
+  overflow-y: auto;
 }
 
 .move-area {
   width: 100%;
   height: 100%;
-  position: relative;
+  transition: all 0.3s ease;
+}
+.move-area::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+
+.move-area > image {
+  width: 90%;
+  height: 90%;
+  margin: 5%;
 }
 
 .move-view {
@@ -300,6 +287,7 @@ onMounted(async () => {
   background-color: #ff4444;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   transition: all 0.1s linear;
+  position: relative;
 }
 
 .point > text {
@@ -323,8 +311,8 @@ onMounted(async () => {
 .edit-btn-text {
   width: 100%;
   display: flex;
-  /* justify-content: center; */
+  justify-content: center;
-  margin-left: 10px;
+  /* margin-left: 10px; */
 }
 
 .edit-btn-text > text {
@@ -350,8 +338,7 @@ onMounted(async () => {
 }
 
 .confirm-btn {
-  left: calc(50% - 12px);
+  transition: all 0.3s ease;
-  bottom: -12px;
 }
 
 .delete-btn {

src/pages/point-book-detail.vue

@@ -13,6 +13,7 @@ const showTip = ref(false);
 const showTip2 = ref(false);
 const groups = ref([]);
 const data = ref({});
+const targetId = ref("");
 const targetSrc = ref("");
 const arrows = ref([]);
 
@@ -42,6 +43,7 @@ onLoad(async (options) => {
     const config = uni.getStorageSync("point-book-config");
     config.targetOption.some((item) => {
       if (item.id === result.targetType) {
+        targetId.value = item.id;
         targetSrc.value = item.icon;
       }
     });
@@ -122,7 +124,7 @@ onLoad(async (options) => {
           />
         </button>
       </view>
-      <BowTargetEdit :src="targetSrc" :arrows="arrows" />
+      <BowTargetEdit :id="targetId" :src="targetSrc" :arrows="arrows" />
       <view :style="{ marginTop: '20px' }">
         <SButton :onClick="goBack" :rounded="50">关闭</SButton>
       </view>

src/util.js

@@ -380,25 +380,25 @@ const calcHalfBowTarget = (x, y, diameter, noX = false) => {
 };
 
 export const calcTripleBowTarget = (x, y, diameter, noX = false) => {
-  const side = diameter * 0.324;
+  const side = diameter * 0.319;
-  if (x / diameter >= 0.306) {
+  if (x / diameter >= 0.312) {
-    if (y / diameter >= 0.64) {
+    if (y / diameter >= 0.65) {
       return calcHalfBowTarget(
-        x - diameter * 0.342,
+        x - diameter * 0.344,
-        y - diameter * 0.68,
+        y - diameter * 0.684,
         side,
         noX
       );
     }
-    if (y / diameter >= 0.304) {
+    if (y / diameter >= 0.31) {
       return calcHalfBowTarget(
         x - diameter * 0.342,
-        y - diameter * 0.34,
+        y - diameter * 0.344,
         side,
         noX
       );
     }
-    if (y / diameter >= -0.03) {
+    if (y / diameter >= -0.025) {
       return calcHalfBowTarget(x - diameter * 0.342, y, side, noX);
     }
   }
@@ -406,10 +406,10 @@ export const calcTripleBowTarget = (x, y, diameter, noX = false) => {
 };
 
 export const calcPinBowTarget = (x, y, diameter, noX = false) => {
-  const side = diameter * 0.482;
+  const side = diameter * 0.484;
   if (x / diameter >= 0.488 && y / diameter >= 0.456) {
     return calcHalfBowTarget(
-      x - diameter * 0.527,
+      x - diameter * 0.523,
       y - diameter * 0.486,
       side,
       noX