uniapp 自定义拍照只有四个角有边框

JuneTT

已于 2024-08-17 10:43:01 修改

阅读量295

点赞数 1

文章标签： uni-app

于 2024-08-17 10:39:17 首次发布

本文链接：https://blog.csdn.net/czdbgsy/article/details/141269566

版权

覆盖摄像头

只需要一个加了定位的块元素即可，具体结构如下

<camera></camera>
<view class="mask">
    //蒙版样式
</view>

四个角圆角

可以通过border-image实现，我用的四个盒子单独实现每一个角

<view class="scanCode">
	<view class="b1"></view>
	<view class="b2"></view>
	<view class="b3"></view>
	<view class="b4"></view>
</view>

样式如下

.scanCode {
			width: 600rpx;
			flex: 1;
			margin-top: 20rpx;
			position: relative;

			view {
				position: absolute;
				width: 60px;
				height: 60px;
			}

			.b1 {
				// border-radius: 60rpx;
				top: 0;
				left: 0;
				border-top: 6rpx solid white;
				border-left: 6rpx solid white;
				border-radius: 80% 0 0 0;
			}

			.b2 {
				top: 0;
				right: 0;
				border-top: 6rpx solid white;
				border-right: 6rpx solid white;
				border-radius: 0 80% 0 0;
			}

			.b3 {
				bottom: 0;
				left: 0;
				border-bottom: 6rpx solid white;
				border-left: 6rpx solid white;
				border-radius: 0 0 0 80%;
			}

			.b4 {
				bottom: 0;
				right: 0;
				border-bottom: 6rpx solid white;
				border-right: 6rpx solid white;
				border-radius: 0 0 80% 0;
			}
		}