靶子放大方式修改

src/components/BowTargetEdit.vue

@@ -158,7 +158,11 @@ onMounted(async () => {
     <movable-area
       class="move-area"
       :style="{
-        transform: scale > 1 ? `scale(${scale}) translateY(16.7%)` : '',
+        width: scale * 100 + 'vw',
+        height: scale * 100 + 'vw',
+        transform: `translate(${(100 - scale * 100) / 2}vw,${
+          (100 - scale * 100) / 2
+        }vw) translateY(${scale > 1 ? 16.7 : 0}%)`,
       }"
     >
       <image :src="src" mode="widthFix" />
@@ -187,20 +191,11 @@ onMounted(async () => {
         direction="all"
         :animation="false"
         :out-of-bounds="true"
-        :x="arrow ? (rect.width * arrow.x) / scale : 0"
-        :y="arrow ? (rect.width * arrow.y) / scale : 0"
+        :x="arrow ? rect.width * arrow.x : 0"
+        :y="arrow ? rect.width * arrow.y : 0"
       >
-        <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(${1 / scale})` : '' }"
-        >
+        <view class="point"> </view>
+        <view v-if="arrow" class="edit-buttons" @touchstart.stop>
           <view class="edit-btn-text">
             <text>{{ arrow.ring === 0 ? "M" : arrow.ring }}</text>
             <text
@@ -238,17 +233,17 @@ onMounted(async () => {
   overflow-x: hidden;
   overflow-y: auto;
 }
+.container::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
 
 .move-area {
   width: 100%;
   height: 100%;
   transition: all 0.3s ease;
 }
-.move-area::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  color: transparent;
-}
 
 .move-area > image {
   width: 90%;