如何使用UIBezierPath为相机图层实现目标圆角效果

实现方案 #

你当前的代码仅完成了左上角的边角路径绘制，要实现完整的四角带圆角的扫描框效果，补全其余三个角的路径绘制逻辑，再将生成的完整路径作为遮罩赋给相机图层即可。

完整实现代码 #

// 首先做参数边界校验
if cornerRadius > cornerLength { cornerRadius = cornerLength }
if cornerLength > maskContainer.width / 2 { cornerLength = maskContainer.width / 2 }
if cornerLength > maskContainer.height / 2 { cornerLength = maskContainer.height / 2 }

let combinedPath = CGMutablePath()

// 绘制左上角
let upperLeftPoint = CGPoint(x: maskContainer.minX, y: maskContainer.minY)
let upperLeftCorner = UIBezierPath()
upperLeftCorner.move(to: upperLeftPoint.offsetBy(dx: 0, dy: cornerLength))
upperLeftCorner.addArc(withCenter: upperLeftPoint.offsetBy(dx: cornerRadius, dy: cornerRadius),
                       radius: cornerRadius, startAngle: .pi, endAngle: 3 * .pi / 2, clockwise: true)
upperLeftCorner.addLine(to: upperLeftPoint.offsetBy(dx: cornerLength, dy: 0))
combinedPath.addPath(upperLeftCorner.cgPath)

// 绘制右上角
let upperRightPoint = CGPoint(x: maskContainer.maxX, y: maskContainer.minY)
let upperRightCorner = UIBezierPath()
upperRightCorner.move(to: upperRightPoint.offsetBy(dx: -cornerLength, dy: 0))
upperRightCorner.addArc(withCenter: upperRightPoint.offsetBy(dx: -cornerRadius, dy: cornerRadius),
                       radius: cornerRadius, startAngle: 3 * .pi / 2, endAngle: 0, clockwise: true)
upperRightCorner.addLine(to: upperRightPoint.offsetBy(dx: 0, dy: cornerLength))
combinedPath.addPath(upperRightCorner.cgPath)

// 绘制右下角
let lowerRightPoint = CGPoint(x: maskContainer.maxX, y: maskContainer.maxY)
let lowerRightCorner = UIBezierPath()
lowerRightCorner.move(to: lowerRightPoint.offsetBy(dx: 0, dy: -cornerLength))
lowerRightCorner.addArc(withCenter: lowerRightPoint.offsetBy(dx: -cornerRadius, dy: -cornerRadius),
                       radius: cornerRadius, startAngle: 0, endAngle: .pi / 2, clockwise: true)
lowerRightCorner.addLine(to: lowerRightPoint.offsetBy(dx: -cornerLength, dy: 0))
combinedPath.addPath(lowerRightCorner.cgPath)

// 绘制左下角
let lowerLeftPoint = CGPoint(x: maskContainer.minX, y: maskContainer.maxY)
let lowerLeftCorner = UIBezierPath()
lowerLeftCorner.move(to: lowerLeftPoint.offsetBy(dx: cornerLength, dy: 0))
lowerLeftCorner.addArc(withCenter: lowerLeftPoint.offsetBy(dx: cornerRadius, dy: -cornerRadius),
                       radius: cornerRadius, startAngle: .pi / 2, endAngle: .pi, clockwise: true)
lowerLeftCorner.addLine(to: lowerLeftPoint.offsetBy(dx: 0, dy: -cornerLength))
combinedPath.addPath(lowerLeftCorner.cgPath)

// 生成遮罩层添加到相机图层
let maskLayer = CAShapeLayer()
maskLayer.path = combinedPath
maskLayer.lineWidth = 2 // 可按需调整边框宽度
maskLayer.strokeColor = UIColor.white.cgColor // 可按需调整边框颜色
maskLayer.fillColor = UIColor.clear.cgColor
cameraLayer.addSublayer(maskLayer)

// 若需要实现四周半透、中间镂空的效果，可添加如下代码：
// let fullPath = UIBezierPath(rect: view.bounds)
// fullPath.append(UIBezierPath(rect: maskContainer))
// maskLayer.path = fullPath.cgPath
// maskLayer.fillRule = .evenOdd
// maskLayer.fillColor = UIColor.black.withAlphaComponent(0.5).cgColor

调整cornerRadius参数即可修改圆角弧度，调整cornerLength参数即可修改边角的长度，按需调整参数即可匹配你需要的图2效果。

内容的提问来源于stack exchange，提问作者Valeriy