完善视频缩放功能

src/renderer/components/BigShow.vue

@@ -24,10 +24,8 @@
                     :x="itemV.left" :y="itemV.top"
                     @dragstop="(position) => dragStop(position,itemV,bigScreenObj,curOpeBigscreenId)"
                     @resizestop="(size) => resizeSignal(size,itemV,bigScreenObj,curOpeBigscreenId)"
-                    style="overflow:hidden;!important;"
             >
-                <div ref="signal" :id="itemV.ID" style="width:100%;height:100%;overflow: hidden!important;">
-                    <!--{{itemV.deviceID}}-->
+                <div ref="signal" :id="itemV.ID" style="width:100%;height:100%;overflow: hidden">
                     <VideoPlayer
                         ref="videoPlayer"
                         :options="videoPlayObj[itemV.sourceId]"
@@ -52,7 +50,7 @@
 
     import '../assets/less/splitscreen.less'
     import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
-    import {reqPreviewSourceList, reqRefreshView} from "../api"
+    import {reqRefreshView} from "../api"
     import VideoPlayer from "./player.vue"
 
     export default {
@@ -117,7 +115,6 @@
             this.$store.dispatch('updateBigscreenObj',obj)
             
             // 获取视频播放的配置对象
-            // const signalListJson = await reqPreviewSourceList()
             const videoPlayObj = {
                 2:{
                     sources: [
@@ -126,7 +123,6 @@
                             "type": "rtmp/flv"
                         }
                     ],
-                    aspectRatio: '482:224',
                     techOrder: ['flash'],
                     autoplay: true,
                     controls: false,
@@ -141,7 +137,6 @@
                             "type": "rtmp/flv"
                         }
                     ],
-                    aspectRatio: '1:3',
                     techOrder: ['flash'],
                     autoplay: true,
                     controls: false,
@@ -227,31 +222,13 @@
 
             // 设置视频变形
             scaleFun:function (itemV) {
-                const value = (itemV.width/itemV.height)/(16/9)
-                const value2 = itemV.height/(itemV.width/16*9)
-                console.log(value,value2)
-                if(value<1){
-                    return `transform:scale(${1/value},${value2+1})`
-                }else {
-                    return `transform:scale(${value},1)`
-                }
+                // 1.算出当前视频的高度
+                let videoHeight = itemV.width*9/16
 
-                /*const preWh = this.savePreWh
-                if(preWh[itemV.Id]){
-                    return `transform:scale(${itemV.width/preWh[itemV.Id].width},${itemV.height/preWh[itemV.Id].height})`
-                }*/
-                
-                /*const value = (itemV.width/itemV.height)/(16/9)
-                // 1.宽大于高，并且宽高比值大于16/9
-                if(itemV.width>itemV.height && value>1){
-                    // 先保存旧的宽高
-                    /!*preWh[itemV.Id] = {width:itemV.width,height:itemV.height}
-                    this.savePreWh = preWh*!/
-                    return `transform:scale(${value},1)`
-                }else if(itemV.width<itemV.height && value<1) {
-                    console.log(1/value)
-                    return `transform:scale(1,4)`
-                }*/
+                // 2.如果盒子的高度大于视频的高度，则视频的高度需要拉伸
+                if(itemV.height>videoHeight){
+                    return `transform-origin: 0px 0px;transform:scaleY(${(itemV.height-videoHeight)/videoHeight+1})`
+                }
             },
         },