fix:相机预览在顶部栏和底部栏之间垂直居中

This commit is contained in:
ShenQiLun 2026-06-25 18:13:10 +08:00
parent e640496bb4
commit 22f9114730

View File

@ -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
} }
}) })
}, },