From 34353ebeaf2186198168d6a85ee1eb07688070d2 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 09 九月 2020 16:52:58 +0800
Subject: [PATCH] 实时监控区域画布宽高及比例固定,添加区域图标,默认隐藏区域展示
---
src/components/player/index.vue | 12 ++++++++----
1 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/src/components/player/index.vue b/src/components/player/index.vue
index e73f92b..7c72d4e 100644
--- a/src/components/player/index.vue
+++ b/src/components/player/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="video-player">
- <canvas v-show="showArea" id="area-canvas" ref="areaCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
+ <canvas v-show="showArea" id="area-canvas" ref="areaCanvas" width="960" height="540"></canvas>
<video ref="videoPlayer" :poster="poster" preload="auto" muted></video>
<div class="controls">
<!-- 鍏ㄥ睆 -->
@@ -44,7 +44,7 @@
},
showArea: {
type: Boolean,
- default: true
+ default: false
}
},
@@ -70,6 +70,8 @@
//showProportionY: 3.58,
showProportion: 1.036,
showProportionY: 1.039,
+ // showProportion: 1.666,
+ // showProportionY: 1.666,
canvas: null,
ctx: null,
canvasWidth: 0,
@@ -360,6 +362,7 @@
setWidthHeight(){
this.canvasWidth = this.$refs.videoPlayer.offsetWidth;
this.canvasHeight = this.$refs.videoPlayer.offsetHeight;
+ console.log(this.canvasWidth,this.canvasHeight)
},
async initArea(){
console.log('init')
@@ -380,9 +383,10 @@
}
},
mounted() {
- this.clickStart();
//鑾峰彇video瀹介珮骞剁粰鍖哄煙canvas璧嬪��
- this.setWidthHeight();
+ //this.setWidthHeight();
+ this.clickStart();
+
window.addEventListener('resize',()=>{
//this.setWidthHeight();
//this.initArea();
--
Gitblit v1.8.0