修复滑动时候的渲染问题

src/components/BowTargetEdit.vue

@@ -33,17 +33,12 @@ const onClick = async (e) => {
     x: e.detail.x - (rect.value.width * 0.1) / 2,
     y: e.detail.y - rect.value.top - 10,
   };
-  newArrow.ring = calcRing(
+  const side = rect.value.width * 0.9;
-    props.id,
+  newArrow.ring = calcRing(props.id, newArrow.x, newArrow.y, side, side);
-    newArrow.x,
-    newArrow.y,
-    rect.value.width * 0.9,
-    rect.value.height - rect.value.top
-  );
   arrow.value = {
     ...newArrow,
-    x: newArrow.x / (rect.value.width * 0.9),
+    x: newArrow.x / side,
-    y: newArrow.y / (rect.value.width * 0.9),
+    y: newArrow.y / side,
   };
 };
 
@@ -80,27 +75,20 @@ const onDrag = async (e) => {
   const deltaX = clientX - dragStartPos.value.x;
   const deltaY = clientY - dragStartPos.value.y;
 
-  const width = rect.value.width * 0.9;
+  const side = rect.value.width * 0.9;
-  const height = rect.value.height - rect.value.top;
 
   // 更新坐标
-  arrow.value.x = Math.max(
+  arrow.value.x = Math.max(0, Math.min(side, arrow.value.x * side + deltaX));
-    0,
+  arrow.value.y = Math.max(0, Math.min(side, arrow.value.y * side + deltaY));
-    Math.min(width, arrow.value.x * (rect.value.width * 0.9) + deltaX)
-  );
-  arrow.value.y = Math.max(
-    0,
-    Math.min(height, arrow.value.y * (rect.value.width * 0.9) + deltaY)
-  );
   arrow.value.ring = calcRing(
     props.id,
     arrow.value.x,
     arrow.value.y,
-    width,
+    side,
-    height
+    side
   );
-  arrow.value.x = arrow.value.x / (rect.value.width * 0.9);
+  arrow.value.x = arrow.value.x / side;
-  arrow.value.y = arrow.value.y / (rect.value.width * 0.9);
+  arrow.value.y = arrow.value.y / side;
 
   // 更新拖拽起始位置
   dragStartPos.value = { x: clientX, y: clientY };
@@ -118,71 +106,81 @@ onMounted(async () => {
 </script>
 
 <template>
-  <view
+  <movable-area class="move-container">
-    class="container"
-    @click="onClick"
-    @touchmove="onDrag"
-    @touchend="endDrag"
-  >
-    <image :src="src" mode="widthFix" />
     <view
-      v-for="(arrow, index) in arrows"
+      class="container"
-      :key="index"
+      @click="onClick"
-      class="arrow-point"
+      @touchmove="onDrag"
-      :style="{
+      @touchend="endDrag"
-        left: (arrow.x !== undefined ? arrow.x : 0) * 100 + '%',
-        top: (arrow.y !== undefined ? arrow.y : 0) * 100 + '%',
-      }"
     >
-      <view v-if="arrow.x !== undefined && arrow.y !== undefined" class="point"
+      <image :src="src" mode="widthFix" />
-        ><text>{{ index + 1 }}</text></view
+      <view
+        v-for="(arrow, index) in arrows"
+        :key="index"
+        class="arrow-point"
+        :style="{
+          left: (arrow.x !== undefined ? arrow.x : 0) * 100 + '%',
+          top: (arrow.y !== undefined ? arrow.y : 0) * 100 + '%',
+        }"
       >
-    </view>
-    <!-- 渲染所有箭矢点 -->
-    <view
-      v-if="arrow"
-      class="arrow-point"
-      :style="{
-        left: arrow.x * 100 + '%',
-        top: arrow.y * 100 + '%',
-      }"
-    >
-      <!-- 箭矢点 -->
-      <view class="point"> </view>
-      <!-- 编辑按钮组（只在编辑状态下显示） -->
-      <view class="edit-buttons" @click.stop>
-        <view class="edit-btn-text">
-          <text>{{ arrow.ring === 0 ? "未上靶" : arrow.ring }}</text>
-          <text
-            v-if="arrow.ring > 0"
-            :style="{
-              fontSize: '20px',
-              marginLeft: '5px',
-            }"
-            >环</text
-          >
-        </view>
-        <view class="edit-btn confirm-btn" @click.stop="confirmAdd(index)">
-          <image src="../static/arrow-edit-save.png" mode="widthFix" />
-        </view>
-        <view class="edit-btn delete-btn" @click.stop="deleteArrow(index)">
-          <image src="../static/arrow-edit-delete.png" mode="widthFix" />
-        </view>
         <view
-          class="edit-btn drag-btn"
+          v-if="arrow.x !== undefined && arrow.y !== undefined"
-          @touchstart.stop="startDrag($event, index)"
+          class="point"
+          ><text>{{ index + 1 }}</text></view
         >
-          <image src="../static/arrow-edit-move.png" mode="widthFix" />
-        </view>
       </view>
+      <movable-view
+        v-if="arrow"
+        class="arrow-point"
+        direction="all"
+        :animation="false"
+        :x="rect.width * 0.9 * arrow.x"
+        :y="rect.width * 0.9 * arrow.y"
+      >
+        <!-- 箭矢点 -->
+        <view class="point"> </view>
+        <!-- 编辑按钮组（只在编辑状态下显示） -->
+        <view class="edit-buttons" @click.stop>
+          <view class="edit-btn-text">
+            <text v-if="arrow.ring === 0" :style="{ width: '100%' }"
+              >未上靶</text
+            >
+            <text v-if="arrow.ring !== 0">{{ arrow.ring }}</text>
+            <text
+              v-if="arrow.ring > 0"
+              :style="{
+                fontSize: '16px',
+                marginLeft: '2px',
+              }"
+              >环</text
+            >
+          </view>
+          <view class="edit-btn confirm-btn" @click.stop="confirmAdd(index)">
+            <image src="../static/arrow-edit-save.png" mode="widthFix" />
+          </view>
+          <view class="edit-btn delete-btn" @click.stop="deleteArrow(index)">
+            <image src="../static/arrow-edit-delete.png" mode="widthFix" />
+          </view>
+          <view
+            class="edit-btn drag-btn"
+            @touchstart.stop="startDrag($event, index)"
+          >
+            <image src="../static/arrow-edit-move.png" mode="widthFix" />
+          </view>
+        </view>
+      </movable-view>
     </view>
-  </view>
+  </movable-area>
 </template>
 
 <style scoped>
-.container {
+.move-container {
-  width: 90%;
+  width: 90vw;
+  height: 90vw;
   margin: 10px auto;
+}
+.container {
+  width: 100%;
   position: relative;
   user-select: none;
 }
@@ -194,11 +192,10 @@ onMounted(async () => {
 
 .arrow-point {
   position: absolute;
-  transform: translate(-50%, -50%);
-  z-index: 10;
 }
 
 .point {
+  transform: translate(-50%, -50%);
   width: 12px;
   height: 12px;
   border-radius: 50%;

src/pages/index.vue

@@ -87,6 +87,7 @@ onShow(async () => {
 });
 
 onMounted(async () => {
+  uni.removeStorageSync("point-book-config");
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
   const config = await getAppConfig();

src/util.js

@@ -406,15 +406,16 @@ export const calcPinBowTarget = (
   if (
     x / targetWidth >= 0.26 &&
     x / targetWidth <= 0.74 &&
-    y / targetHeight <= 0.48
+    y / targetWidth >= 0.032 &&
+    y / targetHeight <= 0.51
   ) {
-    return calcHalfBowTarget(x - targetWidth * 0.26, y, side, noX);
+    return calcHalfBowTarget(x - targetWidth * 0.26, y - targetHeight * 0.032, side, noX);
-  } else if (x / targetHeight <= 0.48 && y / targetHeight >= 0.456) {
+  } else if (x / targetHeight <= 0.48 && y / targetHeight >= 0.482) {
-    return calcHalfBowTarget(x, y - targetHeight * 0.456, side, noX);
+    return calcHalfBowTarget(x, y - targetHeight * 0.482, side, noX);
-  } else if (x / targetHeight >= 0.52 && y / targetHeight >= 0.456) {
+  } else if (x / targetHeight >= 0.52 && y / targetHeight >= 0.482) {
     return calcHalfBowTarget(
       x - targetWidth * 0.52,
-      y - targetHeight * 0.456,
+      y - targetHeight * 0.482,
       side,
       noX
     );