使用XComponent做相机预览画面,如何按照设计稿中的尺寸定义预览画面宽高同时还能保持预览画面的正常比例避免画面被拉伸。使用该代码做画面预览发现视频预览画面被拉伸了。
XComponent({
id: 'videoRecord',
type: 'surface',
controller: this.xComponentController
}).onLoad(() => {
this.xComponentController.setXComponentSurfaceSize({ surfaceWidth: 1280, surfaceHeight: 720 })
this.surfaceId = this.xComponentController.getXComponentSurfaceId()
this.startPreview()
}).height('60%')
.width('100%')
后面加上了个纵横比属性:.aspectRatio(720 /1280),预览画面比例正常了,但是预览画面尺寸又变了有没有什么解决办法同时兼顾预览画面比例与画面尺寸?
预览流与录像输出流的分辨率的宽高比要保持一致,如示例代码中宽高比为720:1280 = 9:16,则需要预览流中的分辨率的宽高比也为9:16,如分辨率选择360:640,或540:960,或1080:1920,以此类推。
参考资料:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...
建议把
.height('60%')
.width('100%')
改为
.height('720px')
.width('1280px')
为了将高度和宽度设置为目标比例(720/1280),具体的尺寸需要乘以相同的倍数。