fix:横竖屏

src/components/rotate-tip/rotate-tip.vue

@@ -0,0 +1,114 @@
+<template>
+  <view class="rotate-tip" >
+    <view class="tip" >
+      <view class="icon"  >
+        <img class="arrow arrow-ani"  :src="staticImg.rotateArrow" alt="">
+        <img class="phone phone-ani" :src="staticImg.phone" alt="">
+      </view>
+      <view class="desc" >
+        为了更好的体验，请使用竖屏浏览
+      </view>
+    </view>
+  </view> 
+</template>
+
+
+
+<script setup lang="ts" >
+
+import { useStaticImg } from '@/hooks/index'
+
+const staticImg = useStaticImg()
+
+
+</script>
+
+<style lang="less">
+.rotate-tip {
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .tip {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .icon {
+      width: 144px;
+      height: 144px;
+      position: relative;
+      .arrow {
+        width: 144px;
+        height: 144px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        transform-origin: 0% 0%;
+      }
+      .phone {
+        width: 144px;
+        height: 144px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        rotate: 90deg;
+        transform-origin: 0% 0%;
+      }
+      .arrow-ani {
+        animation: arrow-ani-keyframes 3s ease-in 0s infinite;
+      }
+      .phone-ani {
+        animation: phone-ani-keyframes 3s ease-in 0s infinite;
+      }
+    }
+    .desc {
+      font-size: 16px;
+      font-family: PingFang SC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 22px;
+    }
+  }
+}
+
+@keyframes  arrow-ani-keyframes {
+  0% {
+    rotate: 0deg;
+    opacity: 1;
+  }
+  25% {
+    rotate: -90deg;
+    opacity: 0;
+  }
+  100% {
+    rotate: -90deg;
+    opacity: 0;
+  }
+}
+
+@keyframes phone-ani-keyframes {
+  0% {
+    rotate: 90deg;
+  }
+  25% {
+    rotate: 90deg;
+  }
+  50% {
+    rotate: 0deg;
+  }
+  100% {
+    rotate: 0deg;
+  }
+}
+</style>
+
+

src/hooks/index.ts

@@ -30,16 +30,20 @@ export const useScheduler = (cb: () => void, delay: number) => {
     onPlaying: () => {}
   }
 
-  let timeId: number | null = null
+  let timeId = ref<number>()
 
   const playing = () => {}
 
-  const clearScheduler = () => clearInterval(timeId as number)
+  const clearScheduler = () => {
+    console.log('暂停计时器:', timeId.value);
+    
+    clearInterval(timeId.value as number)
+  }
 
   onUnmounted(clearScheduler)
 
   stx.start = () => {
-    timeId = setInterval(() => {
+    timeId.value = setInterval(() => {
       cb()
       playing()
     }, delay)
@@ -206,17 +210,6 @@ export const usePlatform = (): DEVICE.Platform => {
  *  node.width = node.width * rate * 2 + 'rpx
  */
 export const useAdaptationIpadAndPhone = () => {
-  // const { windowWidth, windowHeight } = uni.getWindowInfo()
-  // console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
-  
-  // const { screenWidth, screenHeight, windowWidth, windowHeight } = uni.getSystemInfoSync()
-  
-
-
-  // console.log(window.screen.width, window.screen.height);
-  
-  console.log('useAdaptationIpadAndPhone');
-  
   let a = window.innerWidth / window.innerHeight > 0.5 ? 667 / ( window.innerHeight ) : 1
 
   const resizeHanlde = () => {
@@ -224,9 +217,8 @@ export const useAdaptationIpadAndPhone = () => {
     var screenWidth = window.innerWidth;
     var screenHeight = window.innerHeight;
 
-    const rate = screenWidth / screenHeight 
-    
-    console.log(screenWidth, screenHeight );
+    const rate = screenWidth / screenHeight
+
     if ( rate > 0.5 ) { // 大于0.6 说明是平板 
       a = 667 / (  screenHeight )
     } else {
@@ -235,13 +227,9 @@ export const useAdaptationIpadAndPhone = () => {
   }
 
   // 监听窗口尺寸变化事件
-window.addEventListener('resize', resizeHanlde);
-  
-console.log('a', a);
-
-return a
-
+  window.addEventListener('resize', resizeHanlde);
 
+  return a
 }
 
 export const useQueryParmas = async () => {
@@ -307,7 +295,6 @@ export const useMagnifier = async (
   { ansUrl: string,  quesUrl: string, instance: ComponentInternalInstance, rate: number}
 ) => {
 
-  return
   const adaptatio = useAdaptationIpadAndPhone()
 
   let ctx: UniApp.CanvasContext = uni.createCanvasContext(canvasId)
@@ -317,140 +304,148 @@ export const useMagnifier = async (
   // 初始化放大镜的参数
   const magnifierSize = 150 * deviceWidthRate  ; // 放大镜尺寸
   const magnification = 1.5 ; // 放大倍数
-  const lineWidth = 4 * deviceWidthRate// 放大镜边框宽度
+  const lineWidth = 6 * deviceWidthRate// 放大镜边框宽度
+
+  let _moveMagnifier = (event: TouchEvent) => {}
 
+  const createImgStr = async () => {
     ctx.drawImage(quesUrl, 0, 0, 224 * deviceWidthRate, 386 * deviceWidthRate)
-    ctx.save()
+    // ctx.save()
     ctx.drawImage(ansUrl, 225 * deviceWidthRate , 0, 75  * deviceWidthRate, 386 * deviceWidthRate)
     ctx.save()
     ctx.draw()
     ctx.restore();
-
-    // console.log(' canvas.getBoundingClientRect().width:',  canvas.getBoundingClientRect().width);
-    
-    // ctx.fillRect(0, 0, canvas.getBoundingClientRect().width /  adaptatio , canvas.getBoundingClientRect().height / adaptatio )
-    // ctx.setFillStyle('rgb(0, 0, 0)')
-    // ctx.draw()
-  // return
     // 创建 Image 对象并加载图片
     await new Promise( resolve => {
-      useSchedulerOnce(() => {
-        resolve(true)
-      }, 100)
+        useSchedulerOnce(() => {
+          resolve(true)
+        }, 100)
     })
-
-    const imageStr = await new Promise((resolve) => {
-
-      uni.canvasToTempFilePath({
-        canvasId: canvasId,
-        fileType: 'png',
-        quality: 1,
-        destWidth: 300 * deviceWidthRate,
-        destHeight: 386 * deviceWidthRate,
-        success: (res) => resolve( res.tempFilePath),
-        fail: (error) => {
-          console.error('canvasToTempFilePath failed: ', error);
-        }
-      }, instance);
+  
+    return await new Promise((resolve) => {
+        uni.canvasToTempFilePath({
+          canvasId: canvasId,
+          fileType: 'png',
+          quality: 1,
+          destWidth: 300 * deviceWidthRate,
+          destHeight: 386 * deviceWidthRate,
+          success: (res) => resolve( res.tempFilePath),
+          fail: (error) => {
+            console.error('canvasToTempFilePath failed: ', error);
+          }
+        }, instance);
     }) as string
+  }
+
+  const draw = async () => {
+
+    const imgStr = await createImgStr()
     
     function initMagnifier () {
-        // 计算放大镜区域的位置和尺寸
-        const startX = 0;
-        const startY = 0;
-        const width = magnifierSize;
-        const height = magnifierSize;
-    
-        // 绘制放大镜效果
-        ctx.save();
-        ctx.beginPath();
-        ctx.arc(
-          magnifierSize / 2,
-          magnifierSize / 2,
-          magnifierSize / 2,
-          0,
-          2 * Math.PI
-        );
-        ctx.strokeStyle = 'yellow'; // 设置边框颜色为黄色
-        ctx.lineWidth = lineWidth; // 设置边框宽度
-        ctx.stroke(); // 绘制边框
-        ctx.closePath();
-        ctx.clip();
-        ctx.drawImage(
-          imageStr,
-          startX,
-          startY,
-          width,
-          height,
-          0 - magnifierSize / 2,
-          0 - magnifierSize / 2,
-          magnifierSize * magnification,
-          magnifierSize * magnification
-        );
-        ctx.draw()
-        ctx.restore();
+          // 计算放大镜区域的位置和尺寸
+          const startX = 0;
+          const startY = 0;
+          const width = magnifierSize;
+          const height = magnifierSize;
+
+          // 绘制阴影
+          ctx.shadowColor = 'black';
+          ctx.shadowBlur = 20;
+          ctx.shadowOffsetX = 0;
+          ctx.shadowOffsetY = 0;
+          
+
+          // 绘制放大镜效果
+          ctx.save();
+          ctx.beginPath();
+          ctx.arc(
+            magnifierSize / 2,
+            magnifierSize / 2,
+            magnifierSize / 2,
+            0,
+            2 * Math.PI
+          );
+          ctx.strokeStyle = 'yellow'; // 设置边框颜色为黄色
+          ctx.lineWidth = lineWidth; // 设置边框宽度
+          ctx.stroke(); // 绘制边框
+          ctx.closePath();
+          ctx.clip();
+          ctx.drawImage(
+            imgStr,
+            startX,
+            startY,
+            width,
+            height,
+            0 - magnifierSize / 2,
+            0 - magnifierSize / 2,
+            magnifierSize * magnification,
+            magnifierSize * magnification
+          );
+          ctx.draw()
+          ctx.restore();
     }
-   
-    function moveMagnifier (event: TouchEvent) {
-        
-        event.preventDefault();
-        event.stopPropagation();
-        // * adaptatio * deviceWidthRate
-        const mouseX = (event.touches[0].pageX - canvas.getBoundingClientRect().left) / adaptatio 
-        const mouseY = (event.touches[0].pageY -  canvas.getBoundingClientRect().top) / adaptatio
-
-        // 清空 Canvas
-        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
-    
-        // 计算放大镜区域的位置和尺寸
-        const startX = (mouseX - magnifierSize / 2)
-        const startY = (mouseY - magnifierSize / 2)
-        const width = magnifierSize;
-        const height = magnifierSize;
     
-        // 绘制放大镜效果
-        ctx.save();
-        ctx.beginPath();
-        ctx.arc(mouseX, mouseY, magnifierSize / 2, 0, 2 * Math.PI);
-        ctx.strokeStyle = 'yellow';
-        ctx.lineWidth = lineWidth; 
-        ctx.stroke()
-        ctx.closePath();
-        ctx.clip();
-        ctx.drawImage(
-          imageStr,
-          startX,
-          startY,
-          width,
-          height,
-          mouseX - (magnifierSize * magnification) / 2,
-          mouseY - (magnifierSize * magnification) / 2,
-          magnifierSize * magnification,
-          magnifierSize * magnification
-        );
-        ctx.draw()
-        ctx.restore();
-    }
+    function moveMagnifier (event: TouchEvent) {
+          
+          event.preventDefault();
+          event.stopPropagation();
+          const mouseX = (event.touches[0].pageX - canvas.getBoundingClientRect().left) / adaptatio 
+          const mouseY = (event.touches[0].pageY -  canvas.getBoundingClientRect().top) / adaptatio
   
-  const draw = async () => {
-      initMagnifier();
-      // 监听鼠标移动事件，实现放大镜效果
-      canvas.addEventListener("touchmove", moveMagnifier);
+          // 清空 Canvas
+          ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
+      
+          // 计算放大镜区域的位置和尺寸
+          const startX = (mouseX - magnifierSize / 2)
+          const startY = (mouseY - magnifierSize / 2)
+          const width = magnifierSize;
+          const height = magnifierSize;
+      
+          // 绘制放大镜效果
+          ctx.save();
+          ctx.beginPath();
+          ctx.arc(mouseX, mouseY, magnifierSize / 2, 0, 2 * Math.PI);
+          ctx.strokeStyle = 'yellow';
+          ctx.lineWidth = lineWidth; 
+          ctx.stroke()
+          ctx.closePath();
+          ctx.clip();
+          ctx.drawImage(
+            imgStr,
+            startX,
+            startY,
+            width,
+            height,
+            mouseX - (magnifierSize * magnification) / 2,
+            mouseY - (magnifierSize * magnification) / 2,
+            magnifierSize * magnification,
+            magnifierSize * magnification
+          );
+          ctx.draw()
+          ctx.restore();
     }
 
-    const clear = () => {
-      ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
-      ctx.draw()
-      canvas.removeEventListener('touchmove', moveMagnifier)
-    }
+    _moveMagnifier = moveMagnifier
 
-    onUnmounted(() => {
-      canvas.removeEventListener('touchmove', moveMagnifier)
-    })
-    
-    return {
-      draw, clear
-    }
+    initMagnifier();
+
+    // 监听鼠标移动事件，实现放大镜效果
+    canvas.addEventListener("touchmove",moveMagnifier);
+  }
+
+  const clear = () => {
+    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
+    ctx.draw()
+    canvas.removeEventListener('touchmove', _moveMagnifier)
+  }
+
+  onUnmounted(() => {
+    canvas.removeEventListener('touchmove', _moveMagnifier)
+  })
+  
+  return {
+    draw, clear
+  }
 };
 
 
@@ -475,8 +470,7 @@ export const useGyro = async () => {
 
   }
   if (window.DeviceOrientationEvent) {
-    console.log();
-    
+    console.log('设备支持陀螺仪功能');
     // 支持陀螺仪功能
     window.addEventListener('deviceorientation', handleOrientation);
   } else {

src/main.ts

@@ -5,7 +5,7 @@ import staticImg from '@/utils/static'
 import VConsole from "vconsole"
 
 
-// new VConsole()
+new VConsole()
 
 
 export function createApp() {

src/pages/GameView/index.vue

@@ -2,9 +2,7 @@
   <view
     class="game-view"
     id="game-view"
-   
   >
-  <!--  :key="device.dire" -->
   <!--  :style="`pointer-events: ${state.mode === CardModeEnum.PREVIEW ? 'none' : 'all'}`" -->
     <navbar
       @goback="goback"
@@ -37,12 +35,10 @@
 
   </view>
 
-  <view class="device-dire-tip"  v-if="device.dire === 'H'" >
-    <view class="tip" >
-      <img :src="staticImg.dire" alt="">
-      <view class="desc" >为了更好的体验，请使用竖屏浏览</view>
-    </view>
-  </view> 
+  <!-- <view class="device-dire-tip"  v-if="device.dire === 'H'" >
+    <rotate-tip />
+  </view>  -->
+
 
   <img v-if="state.mode === CardModeEnum.OPRA && gamePlayed" style="width: 100vw;height: 100vh;position: fixed; z-index: 1000000;scale: 1;" :src="staticImg.intro" alt="">
 </template>
@@ -96,7 +92,7 @@ const base64 = useBase64()
 
 const staticImg = useStaticImg()
 
-// useGyro()
+useGyro()
 
 onLoad(query => {
 
@@ -132,7 +128,7 @@ const navbarState = reactive({
 })
 
 const device = reactive({
-  dire: 'H'
+  dire: ''
 })
 
 const state = reactive<State>({
@@ -156,15 +152,16 @@ const state = reactive<State>({
 })
 
 const stx = useScheduler(() => {
+  
   navbarState.countdownTotal++
 }, 1000)
 
 
 const getIntro = () => {
   // 先判断有没有玩过，如果没有玩过
-  
   if (state.mode === CardModeEnum.OPRA) {
     const played = uni.getStorageSync('played')
+    console.log('played:',played);
     
     if (!played) {
       uni.setStorageSync('played', 1)
@@ -188,8 +185,11 @@ const changeMagnifier = (status: boolean) => {
 // 控制游戏开始
 const gameStart = () => {
   navbarState.countdownTotal = 0
-  stx.start()
   playAudio()
+  if (device.dire === 'V') {
+    stx.start()
+  }
+  
 }
 
 // 提交单张题卡数据
@@ -309,7 +309,14 @@ const goback = () => {
 
 // 监听设备方向，如果是横屏，立马停止所有的计时
 useDeviceDire((dire: 'H' | 'V') => {
+  if (device.dire == 'H' && dire === 'V') {
+    stx.start()
+  } 
   device.dire = dire
+  
+  if (dire === 'H') {
+    stx.pause()
+  }
 })
 
 onMounted(async () => {

src/utils/static.ts

@@ -26,6 +26,8 @@ import dire from '@/assets/dire.gif'
 import magnifierClose from '@/assets/magnifier-close.png'
 import magnifierOpen from '@/assets/magnifier-open.png'
 import intro from '@/assets/intro.gif'
+import phone from '@/assets/phone.png'
+import rotateArrow from '@/assets/rotateArrow.png'
 
 export interface StaticImg {
   logo: string
@@ -59,6 +61,8 @@ export interface StaticImg {
   magnifierClose: string
   magnifierOpen: string
   intro: string
+  phone: string
+  rotateArrow: string
 }
 
 let staticImg: Partial<StaticImg> = {
@@ -93,7 +97,9 @@ let staticImg: Partial<StaticImg> = {
   dire,
   magnifierClose,
   magnifierOpen,
-  intro
+  intro,
+  phone,
+  rotateArrow,
 }