feat: 放大镜功能

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

@@ -28,45 +28,17 @@
         <view class="ques"  id="quesRef" >
           <image id="ques-url"  :src="props.board.quesUrl" alt=""  />
         </view>
-        <!-- <view
-      class="mark-button"
-      :style="{
-        width: 357 * rate + 'rpx', 
-        height: 466 * rate + 'rpx',
-        top: 102 * rate + 'rpx',
-        left: '50%', 
-        transform: 'translateX(-50%)',
-       
-     }" 
-    >
-      <view
-        v-for="item in props.board.buttons"
-        class="movable-image"
-        :style="{
-          top: Number(item.y) * rate + 'rpx',
-          left: Number(item.x) * rate + 'rpx',
-          width: 46 * rate + 'rpx', 
-          height: 46 * rate + 'rpx',
-          backgroundColor: colorMap.get(item.color),
-          scale: 0.7,
-          borderRadius: '50%',
-          opacity: props.tipsButton === 1 ? 1 : 0
-        }"
-      />
-        </view> -->
       </view>
-     
       <view class="ans"  id="ansRef" :style="{zIndex: viewZindex.quesView}">
         <image :src="props.board.ansUrl" alt="" />
       </view>
 
       <canvas
-        type="2d" 
-        canvas-id="magnifier-canvas" 
-        id="magnifier-canvas" 
+        type="2d"
+        canvas-id="magnifier-canvas"
+        id="magnifier-canvas"
         :style="{width: '300px', height: '386px', zIndex: viewZindex.magnifierView}"
       ></canvas>
-
       <movable-area 
       v-if="props.cardType !== undefined" 
       class="movable-area"
@@ -112,22 +84,15 @@
         />
       </movable-view>
       </movable-area>
-    </view>
-  </view>
+      <!-- 新手引导 -->
+      <view class="intro">
+        <view class="lingheight" >
 
-  <!-- 实现放大镜功能 -->
-  <!-- <view class="magnifier" >
-    <view class="magnifier-navbar" :style="{width: '100vw', height: navbarInfo.height}" ></view>
-    <view class="magnifier-card" >
-      <canvas
-        type="2d"
-        canvas-id="magnifier-canvas" 
-        id="magnifier-canvas" 
-        style="width: 300px;height:386px"
-      ></canvas>
+        </view>
+      </view>
     </view>
-  </view> -->
 
+  </view>
 </template>
 
 
@@ -219,6 +184,8 @@ useQueryElInfo('#quesRef', (nodeInfo) => quesRef.value = nodeInfo as UniApp.Node
 useQueryElInfo('#ansRef', (nodeInfo) =>  ansRef.value = nodeInfo as UniApp.NodeInfo, getCurrentInstance()!)
 useQueryElInfo('#movableAreaRef', (nodeInfo) => movableAreaRef.value = nodeInfo as UniApp.NodeInfo, getCurrentInstance()!)
 
+console.log('adaptatio:', adaptatio);
+
 const baseRatio = adaptatio
 
 const rate = baseRatio * 2
@@ -402,6 +369,25 @@ const checkAns = (index: number, itemData: Buttons) => {
 
 
 
+
+ 
+
+/**
+ * 新手引导功能
+ */
+const getIntro = () => {
+  // 先判断有没有玩过，如果没有玩过
+
+  const played = uni.getStorageSync('played')
+  if (!played) {
+    uni.setStorageSync('played', 1)
+  }
+  
+}
+
+
+
+
 /**
  * @description 放在onMounted生命周期里就可以生效，功能：把题卡放大缩小
  * @description 需要在touchStart时 设置 viewZindex.value.moveView = viewZindex.value.quesView + 1 
@@ -485,11 +471,6 @@ const createHammer = () => {
 let a = () => {}
 let b = () => {}
 
-/**
- * @description 放大镜功能
- */
-
-
 // 动态设置canvas的宽高
 
 watch(
@@ -505,6 +486,7 @@ watch(
   }
 )
 
+
 onMounted(() => {
   useMagnifier(
     document.getElementById('magnifier-canvas') as HTMLCanvasElement, 
@@ -547,7 +529,7 @@ onMounted(() => {
         height: 148rpx;
         position: relative;
         top: 7rpx;
-        z-index: 12;
+        z-index: 32;
         .trumpt {
           width: 96rpx;
           height: 96rpx;
@@ -701,9 +683,25 @@ onMounted(() => {
           }
         }
       }
-  }
 
+  
+  }
 
+  .intro {
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.3);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 31;
+    scale: 2;
+    .lingheight {
+      width: 200px;
+      height: 200px;
+      // background-color: #fff;
+    }
+  }
   .mark-button {
     width: 100%;
     height: 100%;
@@ -718,9 +716,6 @@ onMounted(() => {
       display: block;
     }
   }
-  
-
-
 
   .opra {
     width: 100vw;
@@ -762,28 +757,6 @@ onMounted(() => {
   align-items: center;
 }
 
-// .magnifier {
-//   width: 100vw;
-//   height: 100vh;
-//   background-color: rgba(0, 0, 0, 0.3);
-//   position: fixed;
-//   top: 0;
-//   left: 0;
-//   z-index: 1000;
-//   display: flex;
-//   flex-direction: column;
-//   align-items: center;
-//   .magnifier-navbar {
-//     width: 100%;
-//     position: relative;
-//   }
-//   .magnifier-card {
-//     width: 714rpx;
-
-//   }
-
-// }
-
 
 
 </style>

src/hooks/index.ts

@@ -305,10 +305,11 @@ export const useMagnifier = async (
     await new Promise( resolve => {
       useSchedulerOnce(() => {
         resolve(true)
-      }, 1000)
+      }, 100)
     })
 
     const imageStr = await new Promise((resolve) => {
+
       uni.canvasToTempFilePath({
         canvasId: canvasId,
         fileType: 'png',

src/pages/GameView/index.vue

@@ -289,7 +289,6 @@ const goback = () => {
 // 监听设备方向，如果是横屏，立马停止所有的计时
 useDeviceDire((dire: 'H' | 'V') => device.dire = dire)
 
-
 onMounted(async () => {
 
   if (state.mode === 'preview') {