点击逻辑优化

layouts/default.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
+import { mapActions, mapMutations } from 'vuex'
 import Audio from '@/components/common/audio/index'
 export default {
   components: {
@@ -39,6 +39,9 @@ export default {
     ...mapActions({
       GetConfig: 'GetConfig',
     }),
+    ...mapMutations([
+      'SetZoom',
+    ]),
     initSceen() {
       let zoom = 1
       const { innerWidth, innerHeight } = window
@@ -48,6 +51,7 @@ export default {
       } else {
         zoom = window.innerWidth / 1080
       }
+      this.SetZoom(zoom)
       this.zoom = zoom
     },
   },

pages/index/game/components/WebRTCPlayer.vue

@@ -4,6 +4,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: "WebRTCPlayer",
   props: {
@@ -17,6 +18,11 @@ export default {
       player: null
     }
   },
+  computed: {
+    ...mapState([
+      'zoom',
+    ]),
+  },
   mounted() {
     this.$watch('videoSrc', () => {
       if (this.videoSrc) {
@@ -67,12 +73,12 @@ export default {
     handler() {
       return {
         click: (e) => {
-          console.log('click', e)
+          const { zoom } = this
           const video = this.$refs.jswebrtc
           const { offsetWidth, offsetHeight } = video // 组件宽高
           const { offsetX, offsetY } = e // 点击位置
-          const clickPercenX = (offsetHeight - offsetY) / offsetHeight
-          const clickPercenY = (offsetX) / offsetWidth
+          const clickPercenX = (offsetHeight * zoom - offsetY) / (offsetHeight * zoom)
+          const clickPercenY = (offsetX) / (offsetWidth * zoom)
 
           // 计算点击区域对应的十六进制
           const max = 32639

store/index.js

@@ -32,6 +32,7 @@ export const state = () => ({
   authBtnIdList: [], // 权限按钮id列表
   deviceList: [], // 设备列表
   device: {}, // 当前设备
+  zoom: 1, // 当前屏幕缩放比例
   appConfig: {
     project_name: '——', // 项目名称
     img_domain: '', // 图片名称
@@ -152,6 +153,9 @@ export const mutations = {
   SetDevice(state, data) {
     state.device = data
   },
+  SetZoom(state, data) {
+    state.zoom = data
+  },
 }
 
 export const actions = {