fix:相机预览在顶部栏和底部栏之间垂直居中
This commit is contained in:
parent
e640496bb4
commit
22f9114730
@ -3,7 +3,7 @@
|
|||||||
<!-- 正方形相机预览(全屏宽度) -->
|
<!-- 正方形相机预览(全屏宽度) -->
|
||||||
<ima-camera-view
|
<ima-camera-view
|
||||||
ref="cameraRef"
|
ref="cameraRef"
|
||||||
:style="'width:' + camSize + 'px;height:' + camSize + 'px;'"
|
:style="'width:' + camSize + 'px;height:' + camSize + 'px;margin-top:' + frameTop + 'px;margin-left:' + frameLeft + 'px;'"
|
||||||
flash="off"
|
flash="off"
|
||||||
facing="back"
|
facing="back"
|
||||||
:widthRatio="1"
|
:widthRatio="1"
|
||||||
@ -81,6 +81,8 @@
|
|||||||
winWidth: 750,
|
winWidth: 750,
|
||||||
winHeight: 1334,
|
winHeight: 1334,
|
||||||
camSize: 750,
|
camSize: 750,
|
||||||
|
frameTop: 0,
|
||||||
|
frameLeft: 0,
|
||||||
previewVisible: false,
|
previewVisible: false,
|
||||||
previewSrc: '',
|
previewSrc: '',
|
||||||
previewSize: 600
|
previewSize: 600
|
||||||
@ -94,6 +96,16 @@
|
|||||||
that.winHeight = res.windowHeight
|
that.winHeight = res.windowHeight
|
||||||
that.camSize = res.windowWidth
|
that.camSize = res.windowWidth
|
||||||
that.previewSize = Math.floor(res.windowWidth * 0.85)
|
that.previewSize = Math.floor(res.windowWidth * 0.85)
|
||||||
|
// 垂直居中:顶部栏110px + 底部操作栏240px
|
||||||
|
var barH = 110
|
||||||
|
var bottomArea = 240
|
||||||
|
var availableH = res.windowHeight - barH - bottomArea
|
||||||
|
if (res.windowWidth < availableH) {
|
||||||
|
that.frameTop = barH + Math.floor((availableH - res.windowWidth) / 2)
|
||||||
|
} else {
|
||||||
|
that.frameTop = barH
|
||||||
|
}
|
||||||
|
that.frameLeft = 0
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user