|
|
@@ -1,7 +1,6 @@
|
|
|
import type { StaticImg } from '@/utils/static'
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
-import { toRefs } from 'vue'
|
|
|
-import { reactive } from 'vue'
|
|
|
+import { reactive, toRefs, nextTick} from 'vue'
|
|
|
import { inject, onUnmounted, onMounted, type ComponentInternalInstance, ref} from 'vue'
|
|
|
import { encode, decode} from 'js-base64'
|
|
|
import hand from '@/assets/3-4.png'
|
|
|
@@ -55,7 +54,6 @@ export const useScheduler = (cb: () => void, delay: number) => {
|
|
|
return stx
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/**
|
|
|
* @description 执行一定的定时器， 会在执行完后销毁
|
|
|
* @param cb 回调函数
|
|
|
@@ -69,9 +67,7 @@ export const useSchedulerOnce = (
|
|
|
cb()
|
|
|
clearTimeout(timeId)
|
|
|
}, delay)
|
|
|
-
|
|
|
onUnmounted(() => clearTimeout(timeId))
|
|
|
-
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -203,7 +199,6 @@ export const usePlatform = (): DEVICE.Platform => {
|
|
|
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/**
|
|
|
* 获取多设备动态适配的比率
|
|
|
* @example
|
|
|
@@ -211,17 +206,42 @@ 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 { windowWidth, windowHeight } = uni.getSystemInfoSync()
|
|
|
+ // const { screenWidth, screenHeight, windowWidth, windowHeight } = uni.getSystemInfoSync()
|
|
|
|
|
|
- const rate = windowWidth / windowHeight
|
|
|
+
|
|
|
+
|
|
|
+ // console.log(window.screen.width, window.screen.height);
|
|
|
|
|
|
- if ( rate > 0.5 ) { // 大于0.6 说明是平板
|
|
|
- return 667 / ( windowHeight )
|
|
|
- } else {
|
|
|
- return 1
|
|
|
+ console.log('useAdaptationIpadAndPhone');
|
|
|
+
|
|
|
+ let a = window.innerWidth / window.innerHeight > 0.5 ? 667 / ( window.innerHeight ) : 1
|
|
|
+
|
|
|
+ const resizeHanlde = () => {
|
|
|
+ // 获取当前窗口的宽度
|
|
|
+ var screenWidth = window.innerWidth;
|
|
|
+ var screenHeight = window.innerHeight;
|
|
|
+
|
|
|
+ const rate = screenWidth / screenHeight
|
|
|
+
|
|
|
+ console.log(screenWidth, screenHeight );
|
|
|
+ if ( rate > 0.5 ) { // 大于0.6 说明是平板
|
|
|
+ a = 667 / ( screenHeight )
|
|
|
+ } else {
|
|
|
+ a = 1
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+ // 监听窗口尺寸变化事件
|
|
|
+window.addEventListener('resize', resizeHanlde);
|
|
|
+
|
|
|
+console.log('a', a);
|
|
|
+
|
|
|
+return a
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
export const useQueryParmas = async () => {
|
|
|
@@ -237,7 +257,6 @@ export const useQueryParmas = async () => {
|
|
|
return {...toRefs(state)}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
/**
|
|
|
* 这是一个导出对象的TypeScript函数，有两个方法decode和encode，分别将Base64编码的字符串解码为JSON对象，将JSON对象编码为Base64编码的字符串。
|
|
|
* @returns 正在返回名为“useBase64”的自定义挂钩。这个钩子有两个函数：`decode` 和 `encode`。 `decode` 函数将字符串作为输入并返回解析后的 JSON 对象。
|
|
|
@@ -288,26 +307,32 @@ export const useMagnifier = async (
|
|
|
{ ansUrl: string, quesUrl: string, instance: ComponentInternalInstance, rate: number}
|
|
|
) => {
|
|
|
|
|
|
+ return
|
|
|
const adaptatio = useAdaptationIpadAndPhone()
|
|
|
|
|
|
let ctx: UniApp.CanvasContext = uni.createCanvasContext(canvasId)
|
|
|
|
|
|
const deviceWidthRate = uni.getSystemInfoSync().windowWidth / 375
|
|
|
-
|
|
|
- const draw = async () => {
|
|
|
- ctx.drawImage(quesUrl, 0, 0, 225 * deviceWidthRate, 386 * deviceWidthRate)
|
|
|
+
|
|
|
+ // 初始化放大镜的参数
|
|
|
+ const magnifierSize = 150 * deviceWidthRate ; // 放大镜尺寸
|
|
|
+ const magnification = 1.5 ; // 放大倍数
|
|
|
+ const lineWidth = 4 * deviceWidthRate// 放大镜边框宽度
|
|
|
+
|
|
|
+ ctx.drawImage(quesUrl, 0, 0, 224 * deviceWidthRate, 386 * deviceWidthRate)
|
|
|
ctx.save()
|
|
|
ctx.drawImage(ansUrl, 225 * deviceWidthRate , 0, 75 * deviceWidthRate, 386 * deviceWidthRate)
|
|
|
ctx.save()
|
|
|
ctx.draw()
|
|
|
ctx.restore();
|
|
|
- // 创建 Image 对象并加载图片
|
|
|
-
|
|
|
- // 初始化放大镜的参数
|
|
|
- const magnifierSize = 150 * deviceWidthRate ; // 放大镜尺寸
|
|
|
- const magnification = 1.5 ; // 放大倍数
|
|
|
- const lineWidth = 4 * deviceWidthRate// 放大镜边框宽度
|
|
|
+
|
|
|
+ // 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)
|
|
|
@@ -329,7 +354,7 @@ export const useMagnifier = async (
|
|
|
}, instance);
|
|
|
}) as string
|
|
|
|
|
|
- function initMagnifier () {
|
|
|
+ function initMagnifier () {
|
|
|
// 计算放大镜区域的位置和尺寸
|
|
|
const startX = 0;
|
|
|
const startY = 0;
|
|
|
@@ -364,16 +389,15 @@ export const useMagnifier = async (
|
|
|
);
|
|
|
ctx.draw()
|
|
|
ctx.restore();
|
|
|
- }
|
|
|
-
|
|
|
- initMagnifier();
|
|
|
-
|
|
|
- // moveMagnifier({ touches: [{pageX:132 + i * 5, pageY: 340 + i * 12 }] })
|
|
|
-
|
|
|
- function moveMagnifier (event: TouchEvent) {
|
|
|
-
|
|
|
- const mouseX = (event.touches[0].pageX - canvas.getBoundingClientRect().left) * adaptatio * deviceWidthRate
|
|
|
- const mouseY = (event.touches[0].pageY - canvas.getBoundingClientRect().top ) * adaptatio * deviceWidthRate
|
|
|
+ }
|
|
|
+
|
|
|
+ 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);
|
|
|
@@ -406,65 +430,60 @@ export const useMagnifier = async (
|
|
|
);
|
|
|
ctx.draw()
|
|
|
ctx.restore();
|
|
|
- }
|
|
|
-
|
|
|
- const move = () => {
|
|
|
-
|
|
|
- let x = canvas.getBoundingClientRect().left + magnifierSize / 2
|
|
|
- let y = canvas.getBoundingClientRect().top + magnifierSize / 2
|
|
|
-
|
|
|
- // 设置目标位置
|
|
|
- const targetX = 170;
|
|
|
- const targetY = 460;
|
|
|
-
|
|
|
- // 设置动画参数
|
|
|
- const animationDuration = 1000; // 1秒
|
|
|
- let startTime: number = 0;
|
|
|
-
|
|
|
- // 动画函数
|
|
|
- function animate() {
|
|
|
-
|
|
|
- if (!startTime) startTime = new Date().getTime();
|
|
|
- const elapsedTime = new Date().getTime() - startTime;
|
|
|
-
|
|
|
- if (elapsedTime < animationDuration) {
|
|
|
-
|
|
|
- // 计算当前位置
|
|
|
- const progress = elapsedTime / animationDuration;
|
|
|
- x = interpolate(x, targetX, progress);
|
|
|
- y = interpolate(y, targetY, progress);
|
|
|
- moveMagnifier({touches: [{pageX: x, pageY: y}]})
|
|
|
-
|
|
|
- // 继续下一帧绘制
|
|
|
- requestAnimationFrame(animate);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 线性插值函数
|
|
|
- function interpolate(start: number, end: number, progress: number) {
|
|
|
- return start + (end - start) * progress;
|
|
|
- }
|
|
|
-
|
|
|
- requestAnimationFrame(animate);
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- // move()
|
|
|
-
|
|
|
+ const draw = async () => {
|
|
|
+ initMagnifier();
|
|
|
// 监听鼠标移动事件，实现放大镜效果
|
|
|
- canvas.addEventListener("touchmove", moveMagnifier );
|
|
|
+ canvas.addEventListener("touchmove", moveMagnifier);
|
|
|
}
|
|
|
|
|
|
const clear = () => {
|
|
|
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
|
|
|
ctx.draw()
|
|
|
- // canvas.removeEventListener('touchmove', moveMagnifier)
|
|
|
+ canvas.removeEventListener('touchmove', moveMagnifier)
|
|
|
}
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
- canvas.removeEventListener('touchmove', () => {})
|
|
|
+ canvas.removeEventListener('touchmove', moveMagnifier)
|
|
|
})
|
|
|
|
|
|
return {
|
|
|
draw, clear
|
|
|
}
|
|
|
- };
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 陀螺仪
|
|
|
+ */
|
|
|
+export const useGyro = async () => {
|
|
|
+ const handleOrientation = (event: DeviceOrientationEvent) => {
|
|
|
+
|
|
|
+ var alpha = event.alpha; // 设备绕 Z 轴的旋转角度（0 到 360 度）
|
|
|
+ var beta = event.beta!; // 设备绕 X 轴的旋转角度（-180 到 180 度）
|
|
|
+ var gamma = event.gamma; // 设备绕 Y 轴的旋转角度（-90 到 90 度）
|
|
|
+
|
|
|
+ console.log('beta', beta);
|
|
|
+
|
|
|
+ if ( beta > 45 && beta <= 270 ) {
|
|
|
+ console.log('顺时针横屏');
|
|
|
+ } else if ( beta < -45 && beta >= -270 ) {
|
|
|
+ console.log('逆時針横屏');
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if (window.DeviceOrientationEvent) {
|
|
|
+ console.log();
|
|
|
+
|
|
|
+ // 支持陀螺仪功能
|
|
|
+ window.addEventListener('deviceorientation', handleOrientation);
|
|
|
+ } else {
|
|
|
+ console.log('设备不支持陀螺仪功能');
|
|
|
+ }
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ window.removeEventListener('deviceorientation', handleOrientation)
|
|
|
+ })
|
|
|
+}
|
lvkun996