update:代码备份

src/pages/training/components/BowTarget.vue

@@ -1,8 +1,6 @@
 <script setup>
 import {
   computed,
-  getCurrentInstance,
-  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -17,7 +15,6 @@ import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, device } = storeToRefs(store);
-const instance = getCurrentInstance();
 
 const props = defineProps({
   currentRound: {
@@ -278,122 +275,6 @@ const showHighlightCanvas = computed(() => {
   return props.totalRound > 0 && currentHighlightAreas.value.length > 0;
 });
 
-const targetImageNaturalSize = ref({
-  width: 0,
-  height: 0,
-});
-
-const targetLayerRect = ref({
-  left: 0,
-  top: 0,
-  width: 0,
-  height: 0,
-  ready: false,
-});
-
-const targetHighlightLayerStyle = computed(() => ({
-  left: `${targetLayerRect.value.left}px`,
-  top: `${targetLayerRect.value.top}px`,
-  width: `${targetLayerRect.value.width}px`,
-  height: `${targetLayerRect.value.height}px`,
-}));
-
-const getRectNumber = (value, fallback = 0) => {
-  const numberValue = Number(value);
-  return Number.isFinite(numberValue) ? numberValue : fallback;
-};
-
-const getImageContentRect = (imageRect) => {
-  const naturalWidth = getRectNumber(targetImageNaturalSize.value.width);
-  const naturalHeight = getRectNumber(targetImageNaturalSize.value.height);
-  const imageWidth = getRectNumber(imageRect?.width);
-  const imageHeight = getRectNumber(imageRect?.height);
-
-  if (naturalWidth <= 0 || naturalHeight <= 0 || imageWidth <= 0 || imageHeight <= 0) {
-    return imageRect;
-  }
-
-  const naturalRatio = naturalWidth / naturalHeight;
-  const boxRatio = imageWidth / imageHeight;
-
-  if (naturalRatio > boxRatio) {
-    const contentHeight = imageWidth / naturalRatio;
-    return {
-      left: imageRect.left,
-      top: imageRect.top + (imageHeight - contentHeight) / 2,
-      width: imageWidth,
-      height: contentHeight,
-    };
-  }
-
-  const contentWidth = imageHeight * naturalRatio;
-  return {
-    left: imageRect.left + (imageWidth - contentWidth) / 2,
-    top: imageRect.top,
-    width: contentWidth,
-    height: imageHeight,
-  };
-};
-
-const updateTargetLayerRect = async () => {
-  await nextTick();
-
-  const query = uni.createSelectorQuery().in(instance?.proxy);
-  query.select(".target").boundingClientRect();
-  query.select(".target-image").boundingClientRect();
-  query.exec((rects = []) => {
-    const stageRect = rects[0];
-    const imageRect = rects[1];
-
-    if (!stageRect || !imageRect || !imageRect.width || !imageRect.height) {
-      targetLayerRect.value = {
-        ...targetLayerRect.value,
-        ready: false,
-      };
-      return;
-    }
-
-    const contentRect = getImageContentRect(imageRect);
-    const width = Math.round(getRectNumber(contentRect?.width));
-    const height = Math.round(getRectNumber(contentRect?.height));
-
-    targetLayerRect.value = {
-      left: getRectNumber(contentRect?.left) - getRectNumber(stageRect.left),
-      top: getRectNumber(contentRect?.top) - getRectNumber(stageRect.top),
-      width,
-      height,
-      ready: width > 0 && height > 0,
-    };
-  });
-};
-
-const onTargetImageLoad = (event) => {
-  const width = getRectNumber(event?.detail?.width);
-  const height = getRectNumber(event?.detail?.height);
-
-  if (width > 0 && height > 0) {
-    targetImageNaturalSize.value = {
-      width,
-      height,
-    };
-  }
-
-  updateTargetLayerRect();
-};
-
-const onWindowResize = () => {
-  updateTargetLayerRect();
-};
-
-watch(
-  showHighlightCanvas,
-  (newVal) => {
-    if (newVal) {
-      updateTargetLayerRect();
-    }
-  }
-);
-
 async function onReceiveMessage(message) {
   if (Array.isArray(message)) return;
   if (message.type === MESSAGETYPESV2.ShootResult && message.shootData) {
@@ -418,10 +299,6 @@ async function onReceiveMessage(message) {
 
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
-  setTimeout(updateTargetLayerRect, 30);
-  if (uni.onWindowResize) {
-    uni.onWindowResize(onWindowResize);
-  }
 });
 
 onBeforeUnmount(() => {
@@ -434,9 +311,6 @@ onBeforeUnmount(() => {
     dirTimer.value = null;
   }
   uni.$off("socket-inbox", onReceiveMessage);
-  if (uni.offWindowResize) {
-    uni.offWindowResize(onWindowResize);
-  }
 });
 </script>
 
@@ -454,14 +328,10 @@ onBeforeUnmount(() => {
         class="target-image"
         src="../../../static/bow-target.png"
         mode="aspectFit"
-        @load="onTargetImageLoad"
       />
       <TargetCanvas
-        v-if="showHighlightCanvas && targetLayerRect.ready"
+        v-if="showHighlightCanvas"
         class="target-highlight-layer"
-        :style="targetHighlightLayerStyle"
-        :canvasWidth="targetLayerRect.width"
-        :canvasHeight="targetLayerRect.height"
         :coordinateRadius="coordinateRadius"
         :showCrosshair="false"
         :showQuadrantLabels="false"
@@ -573,6 +443,10 @@ onBeforeUnmount(() => {
 }
 .target-highlight-layer {
   position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   z-index: 1;
   pointer-events: none;
 }