如何使camera组件展示的视野上叠加的圆圈与camera组件的相对位置保持不变?
为了使用户拍摄的物体位于长方形视野的中心位置,我在视野的中心画了一个绿色的圆圈,当前是用cover-view结合position: fixed来固定圆圈的位置(见附图)。
代码如下:
【WXML】
<!--Camera view-->
<view class="camera-view">
<camera device-position="back" flash="off" frame-size="large"
binderror="cameraError" class="camera-view"></camera>
</view>
<!--Cycle view-->
<cover-view class="cycle-view"></cover-view>
【WXSS】
.camera-view {
width: 100%;
height: 562.5rpx;
margin-top: 5rpx;
}
.cycle-view {
/* Location */
position: fixed;
top: 170rpx;
z-index: 3;
/* Size */
height: 500rpx;
width: 500rpx;
border-radius: 50%;
border: 3rpx solid #0f0;
}
但是,若camera组件的位置发生了变化,而圆圈的位置是固定不变的,则圆圈就会偏离长方形视野的中心位置。
请问,用什么方法可以比较简单地保持圆圈与长方形视野的相对位置保持不变?谢谢!