计分本坐标改成百分比

src/components/BowTargetEdit.vue

@@ -40,7 +40,11 @@ const onClick = async (e) => {
     rect.value.width * 0.9,
     rect.value.height - rect.value.top
   );
-  arrow.value = newArrow;
+  arrow.value = {
+    ...newArrow,
+    x: newArrow.x / (rect.value.width * 0.9),
+    y: newArrow.y / (rect.value.width * 0.9),
+  };
 };
 
 // 确认添加箭矢
@@ -80,8 +84,14 @@ const onDrag = async (e) => {
   const height = rect.value.height - rect.value.top;
 
   // 更新坐标
-  arrow.value.x = Math.max(0, Math.min(width, arrow.value.x + deltaX));
-  arrow.value.y = Math.max(0, Math.min(height, arrow.value.y + deltaY));
+  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.ring = calcRing(
     props.id,
     arrow.value.x,
@@ -89,6 +99,8 @@ const onDrag = async (e) => {
     width,
     height
   );
+  arrow.value.x = arrow.value.x / (rect.value.width * 0.9);
+  arrow.value.y = arrow.value.y / (rect.value.width * 0.9);
 
   // 更新拖拽起始位置
   dragStartPos.value = { x: clientX, y: clientY };
@@ -118,8 +130,8 @@ onMounted(async () => {
       :key="index"
       class="arrow-point"
       :style="{
-        left: (arrow.x !== undefined ? arrow.x : 0) + 'px',
-        top: (arrow.y !== undefined ? arrow.y : 0) + 'px',
+        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"
@@ -131,8 +143,8 @@ onMounted(async () => {
       v-if="arrow"
       class="arrow-point"
       :style="{
-        left: arrow.x + 'px',
-        top: arrow.y + 'px',
+        left: arrow.x * 100 + '%',
+        top: arrow.y * 100 + '%',
       }"
     >
       <!-- 箭矢点 -->