UIView如何繪制相機選擇器

Question

我正在尋找在視圖周圍繪制此類框架的方法。 iOS原圖可以做嗎？

Answer 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方法的原因，它應針對可能影響繪圖的視圖的每次更改（包括視圖大小）執行此操作。