iphone - iOSカメラのカスタマイズ：グリッド線を実装する方法は？

Question

フラッシュ機能を使用したり、フォトギャラリーにアクセスしたり、リア/フロントカメラを使用したりできます。

ユーザーが写真を撮っているときに表示されるグリッド線を実装したいと思います。

何か案は？

Answer 1

UIImageViewに使用する を作成しますcameraOverlayView。

名前があり、「グリッド線」というUIImagePickerController名前yourImagePickerControllerの画像ファイルがあると仮定します。overlay.pngグリッド ライン イメージ ファイルを作成するときは、不透明な白ではなく、必ず透明な背景を使用してください。

UIImageView *overlayImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"overlay.png"]];

CGRect overlayRect = CGRectMake(0, 0, overlayImage.image.size.width, overlayImage.image.size.height);

[overlayImage setFrame:overlayRect];

[yourImagePickerController setCameraOverlayView:overlayImage];

Answer 2

ドキュメントに関する限り、Apple が提供するグリッド線が実際に共有メソッドであるかどうかは記載されていませんが、言及されていないので、私はそうは言いませんが、 cameraOverlayView を使用して独自のものを実装できます。

Answer 3

でとても簡単UIBezierPathです。これがあなたが達成できる方法です。

1. このコードを というファイルに保存しますGridView.swift。

    import Foundation
    import UIKit
   
    class GridView: UIView {
   
    override func draw(_ rect: CGRect) {
   
        let firstColumnPath = UIBezierPath()
        firstColumnPath.move(to: CGPoint(x: bounds.width / 3, y: 0))
        firstColumnPath.addLine(to: CGPoint(x: bounds.width / 3, y: bounds.height))
        let firstColumnLayer = gridLayer()
        firstColumnLayer.path = firstColumnPath.cgPath
        layer.addSublayer(firstColumnLayer)
   
        let secondColumnPath = UIBezierPath()
        secondColumnPath.move(to: CGPoint(x: (2 * bounds.width) / 3, y: 0))
        secondColumnPath.addLine(to: CGPoint(x: (2 * bounds.width) / 3, y: bounds.height))
        let secondColumnLayer = gridLayer()
        secondColumnLayer.path = secondColumnPath.cgPath
        layer.addSublayer(secondColumnLayer)
   
        let firstRowPath = UIBezierPath()
        firstRowPath.move(to: CGPoint(x: 0, y: bounds.height / 3))
        firstRowPath.addLine(to: CGPoint(x: bounds.width, y: bounds.height / 3))
        let firstRowLayer = gridLayer()
        firstRowLayer.path = firstRowPath.cgPath
        layer.addSublayer(firstRowLayer)
   
        let secondRowPath = UIBezierPath()
        secondRowPath.move(to: CGPoint(x: 0, y: ( 2 * bounds.height) / 3))
        secondRowPath.addLine(to: CGPoint(x: bounds.width, y: ( 2 * bounds.height) / 3))
        let secondRowLayer = gridLayer()
        secondRowLayer.path = secondRowPath.cgPath
        layer.addSublayer(secondRowLayer)
    }
    private func gridLayer() -> CAShapeLayer {
        let shapeLayer = CAShapeLayer()
        shapeLayer.strokeColor = UIColor(white: 1.0, alpha: 0.3).cgColor
        shapeLayer.frame = bounds
        shapeLayer.fillColor = nil
        return shapeLayer
    }
   }
   

2. 使用法：

   func addGridView(cameraView: UIView) {
    let horizontalMargin = cameraView.bounds.size.width / 4
    let verticalMargin = cameraView.bounds.size.height / 4
   
    let gridView = GridView()
    gridView.translatesAutoresizingMaskIntoConstraints = false
    cameraView.addSubview(gridView)
    gridView.backgroundColor = UIColor.clear
    gridView.leftAnchor.constraint(equalTo: cameraView.leftAnchor, constant: horizontalMargin).isActive = true
    gridView.rightAnchor.constraint(equalTo: cameraView.rightAnchor, constant: -1 * horizontalMargin).isActive = true
    gridView.topAnchor.constraint(equalTo: cameraView.topAnchor, constant: verticalMargin).isActive = true
    gridView.bottomAnchor.constraint(equalTo: cameraView.bottomAnchor, constant: -1 * verticalMargin).isActive = true
   }