横竖屏检测

src/plugins/index.js

@@ -433,7 +433,7 @@ export function mostValue(arr) {
 
 
 // 海报生成
-export function posterCreate(option, imageArr, textArr, theme,eqcode) {
+export function posterCreate(option, imageArr, textArr, theme, eqcode) {
     let posterUrl = ''
     const { width, height } = option
     Toast.loading({
@@ -470,8 +470,8 @@ export function posterCreate(option, imageArr, textArr, theme,eqcode) {
             imgList.map((item, index) => {
                 // console.log('item',imageArr[index]);
                 if (imageArr[index].name != 'eqcode') {
-                ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
-                    
+                    ctx.drawImage(item, imageArr[index].pos.x, imageArr[index].pos.y, imageArr[index].pos.w, imageArr[index].pos.h); //原生canvas的绘制图片方法，直接百度搜索 `js drawImage`查看方法的参数
+
                 }
             })
 
@@ -500,7 +500,7 @@ export function posterCreate(option, imageArr, textArr, theme,eqcode) {
                 ctx.fillText(textArr[index].content, x, y); //绘制文字
             })
 
-            
+
 
 
             //海报绘制完 ，转成图片对象
@@ -518,4 +518,62 @@ export function posterCreate(option, imageArr, textArr, theme,eqcode) {
         })
 
     return posterUrl
+}
+
+
+// 横竖屏检测
+export function screenOrientation() {
+    const orientationPopNode = createVNode(
+        'div',
+        {
+            class: 'orientationPop',
+        },
+        [
+            createVNode(
+                'div',
+                {
+                    class: 'orientation-icon',
+                },
+            ),
+            createVNode(
+                'div',
+                {
+                    class: 'orientation-text',
+                },
+                '为了您的良好体验'
+            ),
+            createVNode(
+                'div',
+                {
+                    class: 'orientation-text',
+                },
+                '请将手机竖屏操作'
+            )
+        ]
+    )
+    const orientationIconNode = createVNode(
+        'div',
+        {
+            class: 'orientation-icon',
+        },
+        [createVNode('span', {}, '为了您的良好体验')]
+    )
+
+    render(orientationPopNode, document.querySelector('.home'));
+
+
+    window.addEventListener(
+        "onorientationchange" in window ? "orientationchange" : "resize",
+        function () {
+            if (window.orientation === 180 || window.orientation === 0) {
+                // 竖屏
+                gsap.to('.orientationPop', { autoAlpha: 0 })
+            }
+            if (window.orientation === 90 || window.orientation === -90) {
+                // 横屏
+                gsap.to('.orientationPop', { autoAlpha: 1 })
+            }
+        },
+        false
+    );
 }