UIView如何绘制相机选择器答案

【问题标题】：UIView how to draw camera selectorUIView如何绘制相机选择器
【发布时间】：2019-08-29 07:56:42
【问题描述】：

我正在寻找在视图周围绘制此类框架的方法。是否可以使用 iOS 原生绘图？

【问题讨论】：

您可以使用具有此类边框和透明区域的 .png。或者使用贝塞尔路径在视图上绘制这样的路径

【解决方案1】：

使用本机渲染可以轻松绘制此图。一种方法是创建一个新视图并覆盖draw rect 方法。您可以执行以下操作：

class ViewWithFrame: UIView {

    var color: UIColor = UIColor.black { didSet { setNeedsDisplay() } }
    var lineThickness: CGFloat = 5 { didSet { setNeedsDisplay() } }
    var lineLength: CGFloat = 30.0 { didSet { setNeedsDisplay() } }

    override var frame: CGRect { didSet { setNeedsDisplay() } }
    override func layoutSubviews() {
        super.layoutSubviews()
        setNeedsDisplay()
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        var paths: [UIBezierPath] = [UIBezierPath]()

        // Top left
        paths.append({
            let path = UIBezierPath()
            path.move(to: .zero)
            path.addLine(to: CGPoint(x: lineLength, y: 0.0))
            path.addQuadCurve(to: CGPoint(x: lineLength-lineThickness, y: lineThickness), controlPoint: CGPoint(x: lineLength, y: lineThickness))
            path.addLine(to: CGPoint(x: lineThickness, y: lineThickness))
            path.addLine(to: CGPoint(x: lineThickness, y: lineLength-lineThickness))
            path.addQuadCurve(to: CGPoint(x: 0.0, y: lineLength), controlPoint: CGPoint(x: lineThickness, y: lineLength))
            path.close()
            return path
            }())

        // Top right
        paths.append({
            let path = UIBezierPath()
            path.move(to: CGPoint(x: frame.width, y: 0.0))
            path.addLine(to: CGPoint(x: frame.width-lineLength, y: 0.0))
            path.addQuadCurve(to: CGPoint(x: frame.width-(lineLength-lineThickness), y: lineThickness), controlPoint: CGPoint(x: frame.width-lineLength, y: lineThickness))
            path.addLine(to: CGPoint(x: frame.width-lineThickness, y: lineThickness))
            path.addLine(to: CGPoint(x: frame.width-lineThickness, y: lineLength-lineThickness))
            path.addQuadCurve(to: CGPoint(x: frame.width, y: lineLength), controlPoint: CGPoint(x: frame.width-lineThickness, y: lineLength))
            path.close()
            return path
            }())

        // TODO: add 2 bottom paths

        color.setFill()
        paths.forEach { $0.fill() }
    }

}

底部仍然需要绘制，但我希望你明白如何绘制。

注意所有对setNeedsDisplay 的调用。这将在下一个运行循环中触发draw rect 方法，并且对于可能影响绘图的每个视图更改都应该这样做，其中还包括视图大小。

【讨论】：