修复滑动时候的渲染问题

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(
-    props.id,
-    newArrow.x,
-    newArrow.y,
-    rect.value.width * 0.9,
-    rect.value.height - rect.value.top
-  );
+  const side = rect.value.width * 0.9;
+  newArrow.ring = calcRing(props.id, newArrow.x, newArrow.y, side, side);
   arrow.value = {
     ...newArrow,
-    x: newArrow.x / (rect.value.width * 0.9),
-    y: newArrow.y / (rect.value.width * 0.9),
+    x: newArrow.x / side,
+    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 height = rect.value.height - rect.value.top;
+  const side = rect.value.width * 0.9;
 
   // 更新坐标
-  arrow.value.x = Math.max(
-    0,
-    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.x = Math.max(0, Math.min(side, arrow.value.x * side + deltaX));
+  arrow.value.y = Math.max(0, Math.min(side, arrow.value.y * side + deltaY));
   arrow.value.ring = calcRing(
     props.id,
     arrow.value.x,
     arrow.value.y,
-    width,
-    height
+    side,
+    side
   );
-  arrow.value.x = arrow.value.x / (rect.value.width * 0.9);
-  arrow.value.y = arrow.value.y / (rect.value.width * 0.9);
+  arrow.value.x = arrow.value.x / side;
+  arrow.value.y = arrow.value.y / side;
 
   // 更新拖拽起始位置
   dragStartPos.value = { x: clientX, y: clientY };
@@ -118,6 +106,7 @@ onMounted(async () => {
 </script>
 
 <template>
+  <movable-area class="move-container">
     <view
       class="container"
       @click="onClick"
@@ -134,30 +123,34 @@ onMounted(async () => {
           top: (arrow.y !== undefined ? arrow.y : 0) * 100 + '%',
         }"
       >
-      <view v-if="arrow.x !== undefined && arrow.y !== undefined" class="point"
+        <view
+          v-if="arrow.x !== undefined && arrow.y !== undefined"
+          class="point"
           ><text>{{ index + 1 }}</text></view
         >
       </view>
-    <!-- 渲染所有箭矢点 -->
-    <view
+      <movable-view
         v-if="arrow"
         class="arrow-point"
-      :style="{
-        left: arrow.x * 100 + '%',
-        top: arrow.y * 100 + '%',
-      }"
+        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>{{ arrow.ring === 0 ? "未上靶" : arrow.ring }}</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: '20px',
-              marginLeft: '5px',
+                fontSize: '16px',
+                marginLeft: '2px',
               }"
               >环</text
             >
@@ -175,14 +168,19 @@ onMounted(async () => {
             <image src="../static/arrow-edit-move.png" mode="widthFix" />
           </view>
         </view>
+      </movable-view>
     </view>
-  </view>
+  </movable-area>
 </template>
 
 <style scoped>
-.container {
-  width: 90%;
+.move-container {
+  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);
-  } else if (x / targetHeight <= 0.48 && y / targetHeight >= 0.456) {
-    return calcHalfBowTarget(x, y - targetHeight * 0.456, side, noX);
-  } else if (x / targetHeight >= 0.52 && y / targetHeight >= 0.456) {
+    return calcHalfBowTarget(x - targetWidth * 0.26, y - targetHeight * 0.032, side, noX);
+  } else if (x / targetHeight <= 0.48 && y / targetHeight >= 0.482) {
+    return calcHalfBowTarget(x, y - targetHeight * 0.482, side, noX);
+  } 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
     );