处理悬浮球位置在屏幕大小变化时设置为默认位置

static/rtcEngine/WXtrialInterface.html

@@ -23,8 +23,12 @@
 
         <!-- 悬浮框 -->
         <div class="levitated-sphere" :style="levitatedSpherePositionData" v-cloak
-            @click="levitatedSphereVisible = true">
-            <img src="../static/img/xuanfu_icon.png" alt="" @touchmove.prevent="touchmoveLevitatedSphere" @mousemove.prevent="touchmoveLevitatedSphere"
+            @click="onSphere">
+            <img src="../static/img/xuanfu_icon.png" alt=""
+                @mousedown.prevent="onSphereDown"
+                @mouseup.prevent.stop="onSphereUp"
+                @touchmove.prevent="touchmoveLevitatedSphere"
+                @mousemove.prevent="touchmoveLevitatedSphere"
                 @touchend="touchendLevitatedSphere"
                 @mouseup="touchendLevitatedSphere"
                 @mouseleave="touchendLevitatedSphere">
@@ -36,7 +40,9 @@
                 <video ref="rtcMediaPlayer" :style="rtcMediaPlayerStyle" width="100%" height="100%" autoplay
                     webkit-playsinline="true" playsinline x-webkit-airplay="allow" x5-video-player-type="h5"
                     x5-video-player-fullscreen="true" x5-video-orientation="portraint" id="playerVideo"
-                    class="videoRotate" :controls="false" @touchmove.prevent="(event) => {engine.touchClick(event, 2)}" @mousemove.prevent="(event) => {engine.touchClick(event, 2)}"
+                    class="videoRotate" :controls="false"
+                    @touchmove.prevent="(event) => {engine.touchClick(event, 2)}"
+                    @mousemove.prevent="(event) => {engine.touchClick(event, 2)}"
                     @touchstart.prevent="(event) => {engine.touchClick(event, 0)}"
                     @mousedown.prevent="(event) => {engine.touchClick(event, 0)}"
                     @mouseup.prevent="touchendRtcMediaPlayer"

static/rtcEngine/js/WXtrialInterface.js

@@ -340,19 +340,50 @@ url: ${this.engine.options.url}
             }
         },
 
+        // 悬浮球click事件
+        onSphere(e){
+            this.levitatedSphereVisible = true
+            e.preventDefault();
+        },
+        // 悬浮球按下事件
+        onSphereDown(e){
+            // 给元素设置鼠标按下状态
+            e.target.isMousedown = true;
+            e.preventDefault();
+        },
+        // 悬浮球抬起事件
+        onSphereUp(e){
+            // 给元素设置鼠标按下状态
+            e.target.isMousedown = false;
+            e.preventDefault();
+        },
         // 悬浮球移动
         touchmoveLevitatedSphere(e) {
-            let { pageX, pageY } = e.targetTouches[0]
+            // 过滤未按下时的移动事件
+            if(e.type === 'mousemove' && !e.target.isMousedown) return
+
+            let pageX,pageY;
+            if(e.type === 'mousemove' && e.target.isMousedown){
+                pageX = e.pageX;
+                pageY = e.pageY;
+            }else if(e.type === 'touchmove'){
+                // let { pageX, pageY } = e.targetTouches[0]
+                pageX = e.targetTouches[0].pageX;
+                pageY = e.targetTouches[0].pageY;
+            }
+
             let min = 20
             let MaxPageX = this.width - 20
             let MaxPageY = this.height - 20
             pageX = pageX <= min ? min : (pageX >= MaxPageX ? MaxPageX : pageX)
             pageY = pageY <= min ? min : (pageY >= MaxPageY ? MaxPageY : pageY)
+
             this.levitatedSpherePositionData = {
                 left: `${pageX}px`,
                 top: `${pageY}px`,
                 transform: 'translate(-50%, -50%)'
             }
+            e.preventDefault();
         },
         touchendLevitatedSphere(e) {
             localStorage.setItem('levitatedSpherePositionData', JSON.stringify(this.levitatedSpherePositionData))
@@ -1008,6 +1039,9 @@ method: post
                     this.layoutViewWidth = currentWidth;
                     console.log(`2目标: 宽${this.layoutViewWidth},高${this.layoutViewHeight}`);
                 }
+
+                // 悬浮球位置设置为默认位置
+                this.levitatedSpherePositionData = { right: '15px', top: '15px' }
             })
         },