fix: 文字显示变多的bug

src/components/luojigou-board/luojigou-board.vue

@@ -1,85 +1,132 @@
 <template>
-<view class="luojigou-board" >
-  <view class="board" :style="{ transform: `scale(${adaptatio})` ,transformOrigin: '50% 0%'}" >
+<view class="luojigou-board" :style="{width: widget.boardWidth + 'px', height: widget.boardHeight + 'px'}" >
+  <!-- transform: `scale(${adaptatio})` , -->
+  <!-- :style="{ transformOrigin: '50% 0%'}" -->
+  <view class="board"  >
     <image class="board-img" :src="boardUrl" />
-    <view class="board-header" :style="{zIndex: viewZindex.headerView}" id="game-label" >
-        <view class="trumpt" @click="emits('playAudio')">
-          <!-- <image class="dog" :src="staticImg.trumptDog"   /> -->
+    <view 
+      class="board-header" 
+      :style="{zIndex: viewZindex.headerView,  transformOrigin: '0% 0%'}" 
+      id="game-label" 
+    >
+        <view 
+          class="trumpt" 
+          :style="{
+            width:  widget.boardWidth * 0.13 + 'px',
+            height: widget.boardWidth *  0.13 + 'px',
+            top: widget.boardHeight * 0.04 + 'px',
+            left: widget.boardWidth * 0.075 + 'px'
+          }"
+          @click="emits('playAudio')"
+        >
           <image
             class="trumpt-icon dog"
             :src="props.playLoading ? staticImg.trumptGif : staticImg.trumptPng"
           />
         </view>
-        <view class="tip " :key="props.cardDesc">
-          <!-- <scroll-view
-            scroll-y
-            style="height: 88rpx;"
-          >
-            {{props.cardDesc ? props.cardDesc : "加載中"}}
-            {{props.cardDesc ? props.cardDesc : "加載中"}}
-          </scroll-view> -->
+        <view 
+          class="tip " 
+          :key="props.cardDesc"
+          :style="{
+            width: widget.boardWidth * 0.68 + 'px',
+            height: widget.boardHeight * 0.070 + 'px',
+            top: widget.boardHeight * 0.045 + 'px',
+            left: widget.boardWidth * 0.25 + 'px'
+          }"
+        >
           {{props.cardDesc ? props.cardDesc : "加載中"}}
         </view>
         <image
           class="luojigou-dog"
           :src="staticImg.luojigouDog"
+          :style="{
+            width:  widget.boardWidth * 0.11 + 'px',
+            height: widget.boardWidth *  0.11 + 'px',
+            top: -widget.boardWidth * 0.067 + 'px',
+            right: widget.boardWidth * 0.067 + 'px',
+          }"
         />
     </view>
-    <view  class="card" :style="{zIndex: viewZindex.quesView}"  >
+    <view 
+      class="card" 
+      :style="{ 
+        width: widget.boardWidth * 0.64 + 'px', 
+        height: widget.boardHeight * 0.62 + 'px',  
+        zIndex: viewZindex.quesView,
+        top: widget.boardWidth * 0.30  + 'px',
+        left: widget.boardWidth * 0.035 + 'px'
+      }"
+    >
         <view class="ques"  id="quesRef" >
           <image id="ques-url"  :src="props.board.quesUrl" alt=""  />
         </view>
     </view>
-    <view class="ans"  id="ansRef" :style="{zIndex: viewZindex.quesView}">
+    <view 
+      class="ans"
+      id="ansRef" 
+      :style="{
+        width: widget.boardWidth * 0.21 + 'px', 
+        height: widget.boardHeight * 0.62 + 'px',
+        zIndex: viewZindex.quesView,
+        left: widget.boardWidth * 0.675 + 'px',
+        top: widget.boardWidth * 0.30  + 'px'
+      }"
+    >
       <image :src="props.board.ansUrl" alt="" />
     </view>
     <canvas
       type="2d"
       canvas-id="magnifier-canvas"
       id="magnifier-canvas"
-      :style="{width: 600 + 'rpx', height: 772  + 'rpx', zIndex: viewZindex.magnifierView}"
+      :style="{
+        width: widget.boardWidth * 0.85 + 'px', 
+        height: widget.boardHeight * 0.62  + 'px', 
+        zIndex: viewZindex.magnifierView,
+        top: widget.boardWidth * 0.30 + 'px',
+        left: widget.boardWidth * 0.035 + 'px'
+      }"
     ></canvas>
+    
+    <!-- scale: 1 / adaptatio -->
     <movable-area
       v-if="props.cardType !== undefined" 
       class="movable-area"
       id="movableAreaRef" 
       :style="{
-        width: 357 * rate+ 'rpx', 
-        height: 466 * rate  + 'rpx',
-        top: 102 * rate / adaptatio + 'rpx',
-        left: 50  + '%',
-        transform: `translateX(-${50}%)`,
+        width: widget.boardWidth + 'px', 
+        height: widget.boardHeight * 0.75 + 'px',
+        top: widget.boardWidth * 0.30  + 'px',
         zIndex: viewZindex.moveView,
-        scale: 1 / adaptatio
       }"
     >
       <movable-view
         v-for="item in buttons"
         :key="item.id"
         :disabled="item.disabled"
-        :x="item.x  "
+        :x="item.x"
         :y="item.y"
         damping="100"
         direction="all"
         class="movable-view"
         :style="{
-          zIndex: item.zIndex, 
-          width: 46 * rate + 'rpx', 
-          height: 46 * rate+ 'rpx',
+          zIndex: item.zIndex,
+          width: widget.boardWidth * 0.124 + 'px',
+          height: widget.boardWidth * 0.124 + 'px',
         }"
         @touchend="touchend($event, item)"
         @touchstart="touchStart(item)"
       >
         <image 
           :id="`rock-id-${item.id}`"
-          :class="`movable-image `" 
-          :style="{willChange: 'transform', transformOrigin: `center bottom`}"  
-          :src="item.url" 
+          :class="`movable-image `"
+          :style="{willChange: 'transform', transformOrigin: `center bottom`}"
+          :src="item.url"
         />
         
         <image
           v-if="item.ans"
           class="success-flag"
+          :style="{width: widget.boardWidth * 0.05 + 'px', height: widget.boardWidth * 0.036 + 'px' }"
           :src="staticImg.successFlag"
         />
       </movable-view>
@@ -168,7 +215,16 @@ const colorMap = new Map([
   ['orange', '#FF7F00'],
 ])
 
+const { windowWidth, windowHeight } = uni.getSystemInfoSync()
+
+console.log('windowWidth:', windowWidth);
 
+const navbarBarHeight = (window['statusBarHeight'] ? window['statusBarHeight'] * 2 : 33) + 140
+
+const widget = {
+  boardWidth: ( windowHeight - navbarBarHeight  - 30) * 0.578,
+  boardHeight: windowHeight - navbarBarHeight - 30,
+}
 
 const boardUrl = props.cardType == 1 ? staticImg.boardSix : staticImg.boardFour
 
@@ -184,8 +240,6 @@ const baseRatio = adaptatio
 
 const rate = baseRatio * 2
 
-const { windowWidth, windowHeight } = uni.getSystemInfoSync()
-
 const unit = windowWidth / windowHeight > 0.6 ? 1 : 0.5
 
 // 几钮模板
@@ -193,11 +247,7 @@ const copies = props.cardType === 0 ? 4 : 6
 
 const ansItemHeight = computed(() => Math.floor(ansRef.value?.height! / copies))
 
-const TPos = (x: number, y: number) => {
-  
-  return { x: x - movableAreaRef.value?.left! - 23 * rate * unit , y: y - movableAreaRef.value?.top! - 23 * rate * unit }
-  
-}
+const TPos = (x: number, y: number) => ({ x: x - movableAreaRef.value?.left! - 23 * rate * unit , y: y - movableAreaRef.value?.top! - 23 * rate * unit })
 
 const getButtonIndex = (_y: number) => Math.floor(_y / ansItemHeight.value)
 
@@ -205,27 +255,28 @@ const getButtonPosByIndex = (index: number) => {
   
   const x = ansRef.value?.width! + quesRef.value?.width! 
  
-  const y = ansItemHeight.value * index + ansItemHeight.value / 2 - 23 * rate * unit
+  const y = ansItemHeight.value * index + ansItemHeight.value / 6
 
   return { x, y }
 }
 
-const buttonWidth = 46 * windowWidth / 375 * baseRatio
+const buttonWidth = widget.boardWidth * 0.124
 
-const VSpace = props.cardType === 0 ?Math.floor(windowWidth / 375 * 26) * baseRatio + buttonWidth : Math.floor(windowWidth / 375 * 8) * baseRatio + buttonWidth
+// 按钮之间的间隙
+const VSpace = props.cardType === 0 ? Math.floor(windowWidth / 375 * 26) * baseRatio + buttonWidth : widget.boardWidth * 0.168
 
-const Y = 435 * rate
-
-const getX = (index: number) => index * VSpace + Math.floor(windowWidth / 375 * 11) * baseRatio
+const Y = widget.boardHeight * 0.75
+ 
+const getX = (index: number) => ( index * buttonWidth + VSpace * (index + 0.5) ) / 2
 
 // 注意一下四钮 用哪几个颜色的按钮
 let buttons = reactive<Buttons[]>([
-  {id: 0, ans: null, x: getX(0), y: Y * rate  , disabled: false, initX: getX(0), initY: Y * rate,  zIndex: 0, index: -1, url: staticImg.red, color: 'red' },
-  {id: 1, ans: null, x: getX(1), y: Y * rate  , disabled: false, initX: getX(1), initY: Y * rate,  zIndex: 0, index: -1, url: staticImg.blue, color: 'blue' },
-  {id: 2, ans: null, x: getX(2), y: Y * rate  , disabled: false, initX: getX(2), initY: Y * rate,  zIndex: 0, index: -1, url: staticImg.green, color: 'green' },
-  {id: 3, ans: null, x: getX(3), y: Y * rate  , disabled: false, initX: getX(3), initY: Y * rate,  zIndex: 0, index: -1, url: staticImg.orange, color: 'orange' },
-  {id: 4, ans: null, x: getX(4), y: Y * rate  , disabled: false, initX: getX(4), initY: Y * rate,  zIndex: 0, index: -1, url: staticImg.yellow, color: "yellow" },
-  {id: 5, ans: null, x: getX(5), y: Y * rate  , disabled: false, initX: getX(5), initY: Y * rate,  zIndex: 0, index: -1, url: staticImg.purple, color: 'purple' },
+  {id: 0, ans: null, x: getX(0) , y: Y, disabled: false, initX: getX(0), initY: Y ,  zIndex: 0, index: -1, url: staticImg.red, color: 'red' },
+  {id: 1, ans: null, x: getX(1), y: Y , disabled: false, initX: getX(1), initY: Y ,  zIndex: 0, index: -1, url: staticImg.blue, color: 'blue' },
+  {id: 2, ans: null, x: getX(2), y: Y , disabled: false, initX: getX(2), initY: Y ,  zIndex: 0, index: -1, url: staticImg.green, color: 'green' },
+  {id: 3, ans: null, x: getX(3), y: Y , disabled: false, initX: getX(3), initY: Y ,  zIndex: 0, index: -1, url: staticImg.orange, color: 'orange' },
+  {id: 4, ans: null, x: getX(4), y: Y , disabled: false, initX: getX(4), initY: Y ,  zIndex: 0, index: -1, url: staticImg.yellow, color: "yellow" },
+  {id: 5, ans: null, x: getX(5), y: Y , disabled: false, initX: getX(5), initY: Y ,  zIndex: 0, index: -1, url: staticImg.purple, color: 'purple' },
 ])
 
 buttons.splice(props.cardType == 1 ?  buttons.length : buttons.length - 2, buttons.length)
@@ -483,14 +534,13 @@ onMounted(() => {
 
 <style lang="less" scoped >
 .luojigou-board {
-  width: 714rpx;
-  height: 1234rpx;
+  width: 1000rpx;
   position: relative;
   display: flex;
   justify-content: center;
   .board {
-      width: 714rpx;
-      height: 1234rpx;
+      width: 100%;
+      height: 100%;
       position: relative;
       .board-img {
         width: 100%;
@@ -502,19 +552,17 @@ onMounted(() => {
       }
       .board-header {
         width: 100%;
-        height: 148rpx;
         position: relative;
-        top: 7rpx;
         z-index: 32;
         .trumpt {
-          width: 96rpx;
-          height: 96rpx;
+          // width: 96rpx;
+          // height: 96rpx;
           position: relative;
-          top: 44rpx;
-          left: 54rpx;
+          // top: 34rpx;
+          // left: 54rpx;
           .dog {
-            width: 96rpx;
-            height: 96rpx;
+            width: 100%;
+            height: 100%;
             position: absolute;
             z-index: 1;
           }
@@ -528,15 +576,11 @@ onMounted(() => {
           }
         }
         .tip {
-          width: 490rpx;
-          height: 72rpx;
           font-size: 24rpx;
           font-family: PingFangSC-Medium, PingFang SC;
           font-weight: 500;
           color: #ffffff;
           position: absolute;
-          top: 50rpx;
-          left: 176rpx;
           overflow: hidden;
           overflow-y: auto;
         }
@@ -560,8 +604,8 @@ onMounted(() => {
         border-bottom-left-radius: 40rpx;
       }
       .ques {
-        width: 450rpx;
-        height: 772rpx;
+        width: 100%;
+        height: 100%;
         border-right: 2rpx solid #006CAA;
         border-top-left-radius: 40rpx;
         border-bottom-left-radius: 40rpx;
@@ -573,8 +617,6 @@ onMounted(() => {
           width: 100%;
           height: 100%;
           display: block;
-          // border-top-left-radius: 40rpx;
-          // border-bottom-left-radius: 40rpx;
         }
       }
       .ans {
@@ -587,7 +629,7 @@ onMounted(() => {
         overflow: hidden;
         background-color: #fff;
         position: absolute;
-        top: 206rpx;
+        // top: 206rpx;
         left: 476rpx;
         z-index: 2;
         image {

src/hooks/index.ts

@@ -285,21 +285,27 @@ export const useDeviceDire = (cb: (dire: 'H' | 'V') => void) => {
 export const useMagnifier = async (
   canvas: HTMLCanvasElement, 
   canvasId: string, 
-  { ansUrl,  quesUrl, instance, rate } 
+  { ansUrl,  quesUrl, instance, rate }
   : 
   { ansUrl: string,  quesUrl: string, instance: ComponentInternalInstance, rate: number}
 ) => {
 
-  function isIOS() {
-    const userAgent = navigator.userAgent;
-    return /iPhone|iPad|iPod/i.test(userAgent);
+  const isIOS = () => /iPhone|iPad|iPod/i.test(navigator.userAgent)
+
+  const { windowHeight, windowWidth } = uni.getSystemInfoSync()
+
+  const navbarBarHeight = (window['statusBarHeight'] ? window['statusBarHeight'] * 2 : 33) + 140
+
+  const widget = {
+    boardWidth: ( windowHeight - navbarBarHeight  - 30) * 0.578,
+    boardHeight: windowHeight - navbarBarHeight - 30,
   }
 
   const adaptatio = useAdaptationIpadAndPhone()
 
   let ctx: UniApp.CanvasContext = uni.createCanvasContext(canvasId)
 
-  const deviceWidthRate = uni.getSystemInfoSync().windowWidth / 375
+  const deviceWidthRate = uni.getSystemInfoSync().windowWidth / 375 
 
   // 初始化放大镜的参数
   const magnifierSize = 150 * deviceWidthRate  ; // 放大镜尺寸
@@ -309,8 +315,8 @@ export const useMagnifier = async (
   let _moveMagnifier = (event: TouchEvent) => {}
 
   const createImgStr = async () => {
-    ctx.drawImage(quesUrl, 0, 0, 224 * deviceWidthRate, 386 * deviceWidthRate)
-    ctx.drawImage(ansUrl, 225 * deviceWidthRate , 0, 75  * deviceWidthRate, 386 * deviceWidthRate)
+    ctx.drawImage(quesUrl, 0, 0,  widget.boardWidth * 0.64, widget.boardHeight * 0.62)
+    ctx.drawImage(ansUrl, widget.boardWidth * 0.64, 0,  widget.boardWidth * 0.21, widget.boardHeight * 0.62)
     ctx.save()
     ctx.draw()
     // ctx.restore();
@@ -326,8 +332,8 @@ export const useMagnifier = async (
           canvasId: canvasId,
           fileType: 'png',
           quality: 1,
-          destWidth: 300 * deviceWidthRate,
-          destHeight: 386 * deviceWidthRate,
+          destWidth: widget.boardWidth * 0.85,
+          destHeight: widget.boardHeight * 0.62,
           success: (res) => resolve( res.tempFilePath),
           fail: (error) => {
             console.error('canvasToTempFilePath failed: ', error);
@@ -342,8 +348,8 @@ export const useMagnifier = async (
     
     function initMagnifier () {
           // 计算放大镜区域的位置和尺寸
-          const startX = 200;
-          const startY = 0;
+          const startX = magnifierSize / 2;
+          const startY = magnifierSize / 2;
           const width = magnifierSize;
           const height = magnifierSize;
 
@@ -388,8 +394,8 @@ export const useMagnifier = async (
           
           event.preventDefault();
           event.stopPropagation();
-          let mouseX = Math.floor((event.touches[0].pageX -  canvas.getBoundingClientRect().left) / adaptatio)
-          let mouseY = Math.floor((event.touches[0].pageY -  canvas.getBoundingClientRect().top) / adaptatio)
+          let mouseX = Math.floor((event.touches[0].pageX -  canvas.getBoundingClientRect().left) )
+          let mouseY = Math.floor((event.touches[0].pageY -  canvas.getBoundingClientRect().top))
     
           
           // 拖拽边界处理
@@ -403,7 +409,7 @@ export const useMagnifier = async (
           
           // 计算放大镜区域的位置和尺寸
           const startX = Math.floor((mouseX - magnifierSize / 2 )) 
-          const startY = Math.floor((mouseY - magnifierSize / 2 )) 
+          const startY = Math.floor((mouseY - magnifierSize / 2 ))
           const width = magnifierSize;
           const height = magnifierSize;
           
@@ -422,8 +428,8 @@ export const useMagnifier = async (
           
           const sx = sxCount <= 0 ? 0 :  mouseX - (magnifierSize * magnification) / 2
 
-          const sy = syCount <= 0 ? 0 : (mouseY - (magnifierSize * magnification) / 2)
-
+          const sy = syCount <= 0 ? 0 : ( mouseY - (magnifierSize * magnification) / 2)
+          
           ctx.drawImage(
             imgStr,
             startX,
@@ -432,22 +438,11 @@ export const useMagnifier = async (
             height,
             isIOS() ? sx: sxCount ,
             isIOS() ? sy : syCount,
+         
             magnifierSize * magnification ,
             magnifierSize * magnification  
           );
-          
-          // ctx.drawImage(
-          //   imgStr,
-          //   startX,
-          //   startY,
-          //   width,
-          //   height,
-          //   mouseX - (magnifierSize * magnification) / 2 ,
-          //   mouseY - (magnifierSize * magnification) / 2 ,
-          //   magnifierSize * magnification ,
-          //   magnifierSize * magnification  
-          // );
-         
+
           ctx.draw()
           ctx.restore();
     }