ページ 12 – Kobito Log

iPhoneで録画したポートレート動画の描画

投稿者作成者: Kobito
投稿日 2022-01-14

iPhoneでポートレート(portrait == 縦方向に長い画像)撮影した動画は、フレームを描画すると意図した角度から90°反時計回りに回転して描画されてしまいます。その理由についてAppleのこのコードを元に勉強してみました。作成したサンプルはこちら。

iPhoneで撮影した動画は全てランドスケープ(landscape == 横方向に長い画像)で保存されるようです。その動画がポートレートかランドスケープかの判定にはAVAssetTrackのpreferredTransformというプロパティを用いるということのようです。

preferredTransformはCGAffineTransformというクラスのインスタンスです。Affine Transform（アフィン変換）を理解するには行列の知識が必要なのですが、この「さつき先生」の動画レクチャーがウルトラ分かりやすいのでおすすめします。

CGAffineTransformはこのような行列です。

iPhoneで撮影したランドスケープ動画のpreferredTransformの値は以下のようになっています。これはつまり単位行列(identity matrix)です。

affine transform a: 1.0
affine transform b: 0.0
affine transform c: 0.0
affine transform d: 1.0
affine transform tx: 0.0
affine transform ty: 0.0

単位行列はベクトルや行列にかけても、そのベクトルや行列を変化させません。これは、グラフィックスでは、元の動画を変化させない（スケール、回転、並行移動をさせない）ということです。

iPhoneで撮影したポートレート動画のpreferredTransformの値は以下のようになっていました。単位行列ではなく、aとdの値が0.0, bが1.0, cは-1.0という値になっています。またtxの値が1080（画像の縦寸法）になっています。（txが画像の縦寸法の値になっている理由がいまいちよく分かっていません、、、分かり次第記事をアップデートします)

affine transform a: 0.0
affine transform b: 1.0
affine transform c: -1.0
affine transform d: 0.0
affine transform tx: 1080.0
affine transform ty: 0.0

この行列の逆行列は以下です。bとcが入れ替わり、txとtyも入れ替わっています。

affine transform inverted a: 0.0
affine transform inverted b: -1.0
affine transform inverted c: 1.0
affine transform inverted d: 0.0
affine transform inverted tx: -0.0
affine transform inverted ty: 1080.0

このa, b, c, dの部分はつまり、θ = 270°の回転行列です。回転行列式の仕組みも、このさつき先生のハイパー分かりやすい動画レクチャーをご覧ください。さつき先生の説明にある回転行列と比べるとCGAffineTransformはcとdの位置が入れ替わっています。これはこの行列を右から掛けるか左から掛けるかの違いから来ています。

つまりこの preferredTransformの値は、逆行列を用いることで、単位行列の時はそのまま単位行列を返し、回転したい場合は回転行列を返して利用するところがミソです。

var affineTransform: CGAffineTransform {
    return self.videoTrack.preferredTransform.inverted()
}

UIImageViewには以下のようにCVPixelBuffer -> CIImage -> CGImage -> UIImage と変換させ、描画させています。

func displayFrame(_ frame: CVPixelBuffer?, withAffineTransform transform: CGAffineTransform) {
    DispatchQueue.main.async { // updating the UI needs to happen on the main thread
        if let frame = frame {            
            let ciImage = CIImage(cvPixelBuffer: frame)
                .transformed(by: transform) // applying affineTransform here, otherwise a portrait image will be displayed in landscape.
            let ciContext = CIContext(options: nil)
            guard let cgImage = ciContext.createCGImage(ciImage, from: ciImage.extent) else { return }
            let uiImage = UIImage(cgImage: cgImage)
            self.imageView.image = uiImage
        }
    }
}

iOS Swift

CAShapeLayerをアニメーションさせる

投稿者作成者: Kobito
投稿日 2022-01-07

CAShapeLayerのpositionをfor loop内でインクリメントし、アニメーションさせてみます。

import UIKit

class ViewController: UIViewController {
    
    var dotShapeLayer = CAShapeLayer()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        showPoint()
        movePoint()
    }

    func showPoint() {
        view.layer.addSublayer(dotShapeLayer)
        let dotRect = CGRect(x: 0, y: 0, width: 10, height: 10)
        let smallDotPath = UIBezierPath(rect: dotRect)
        dotShapeLayer.path = smallDotPath.cgPath
    }
    
    func movePoint() {
        DispatchQueue.global().async {
            for i in 0...100 {
                DispatchQueue.main.async {
                    self.dotShapeLayer.position = CGPoint(x: i * 2, y: i * 2)
                    self.view.layer.setNeedsDisplay()
                }
                sleep(1)
            }
        }
    }
}

iOS Swift

CAShapeLayerに図形を描く

投稿者作成者: Kobito
投稿日 2022-01-06

Core AnimationのCALayerを使って、Viewに図形を描くことが出来ます。

override func viewDidLoad() {
    super.viewDidLoad()
    let shapeLayer = CAShapeLayer() // CAShapeLayerインスタンスを作成
　　view.layer.addSublayer(shapeLayer)
    print(shapeLayer.bounds) // (0.0, 0.0, 0.0, 0.0)をプリント
}

addSublayer(shapeLayer) とした時点では、ShapeLayerはサイズを持たないオブジェクトとしてview.layerのsublayerとして存在しています。サイズはないのですが、概念上黄色に着色して図にすると以下のようになります。

図を描くには、UIBezierPathクラスを使います。

let path = UIBezierPath()
path.move(to: CGPoint(x: 5, y: 5))      // 図形の起点を定める
path.addLine(to: CGPoint(x: 5, y: 130)) // 起点からどのポイントに線を引くか定める

shapeLayer.path = path.cgPath           // shapeLayerのpathにpath.cgPathを代入
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = 6

(x: 5, y: 5)から(x: 5, y: 130)を結ぶ線が引かれました。

let path = UIBezierPath()
path.move(to: CGPoint(x: 5, y: 5))      // 図形の起点を定める
path.addLine(to: CGPoint(x: 5, y: 130)) // 起点からどのポイントに線を引くか定める
path.addLine(to: CGPoint(x: 125, y: 130)) // さらに線を伸ばす

shapeLayer.path = path.cgPath           // shapeLayerのpathにpath.cgPathを代入
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.fillColor = UIColor.link.cgColor // 青色に塗りつぶす
shapeLayer.lineWidth = 6

.addQuadCurve(to: CGPoint, controlPoint: CGPoint)を使い、曲線を描き、pathを閉じます。

let path = UIBezierPath()
path.move(to: CGPoint(x: 5, y: 5))      // 図形の起点を定める
path.addLine(to: CGPoint(x: 5, y: 130)) // 起点からどのポイントに線を引くか定める
path.addLine(to: CGPoint(x: 125, y: 130)) // さらに線を伸ばす
path.addQuadCurve(to: CGPoint(x: 5, y: 5), controlPoint: CGPoint(x: 125, y: 5)) // 曲線を描く
path.close() // pathを閉じる

shapeLayer.path = path.cgPath           // shapeLayerのpathにpath.cgPathを代入
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.fillColor = UIColor.link.cgColor // 青色に塗りつぶす
shapeLayer.lineWidth = 6

let path = UIBezierPath()
path.move(to: CGPoint(x: 5, y: 5))      // 図形の起点を定める
path.addLine(to: CGPoint(x: 5, y: 130)) // 起点からどのポイントに線を引くか定める
path.addLine(to: CGPoint(x: 125, y: 130)) // さらに線を伸ばす
path.addQuadCurve(to: CGPoint(x: 5, y: 5), controlPoint: CGPoint(x: 125, y: 5)) // 曲線を描く
path.close() // pathを閉じる

shapeLayer.bounds = path.bounds    // path.boundsを代入
print("shapeLayer.bounds after: \(shapeLayer.bounds)") // サイズのなかったshapeLayer.boundsにpath.boundsが設定される。shapeLayer.bounds after: (5.0, 5.0, 120.0, 125.0)
shapeLayer.path = path.cgPath           // shapeLayerのpathにpath.cgPathを代入
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.fillColor = UIColor.link.cgColor // 青色に塗りつぶす
shapeLayer.lineWidth = 6

shapeLayerがサイズを持ち、図形はdefault position(0.0, 0.0)へ配置されました。

let path = UIBezierPath()
path.move(to: CGPoint(x: 5, y: 5))      // 図形の起点を定める
path.addLine(to: CGPoint(x: 5, y: 130)) // 起点からどのポイントに線を引くか定める
path.addLine(to: CGPoint(x: 125, y: 130)) // さらに線を伸ばす
path.addQuadCurve(to: CGPoint(x: 5, y: 5), controlPoint: CGPoint(x: 125, y: 5)) // 曲線を描く
path.close() // pathを閉じる

shapeLayer.bounds = path.bounds    // path.boundsを代入
print("shapeLayer.bounds after: \(shapeLayer.bounds)") // サイズのなかったshapeLayer.boundsにpath.boundsが設定される。shapeLayer.bounds after: (5.0, 5.0, 120.0, 125.0)

// shapeLayerのposition.x, yをview.boundsのmidX, midYに設定
shapeLayer.position.x = view.bounds.midX 
shapeLayer.position.y = view.bounds.midY


shapeLayer.path = path.cgPath           // shapeLayerのpathにpath.cgPathを代入
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.fillColor = UIColor.link.cgColor // 青色に塗りつぶす
shapeLayer.lineWidth = 6

shapeLayerのポジションがview.bounds.midY, midXに設定されました。

iOS Swift

UIButtonの背景色をコードで設定

投稿者作成者: Kobito
投稿日 2022-01-06

UIButton.backgroundColorでボタンの背景色を設定するとボタンをプレスした時の色の反応が見えないため、UIColorからUIImageを作成し、UIButtonのバックグラウンドイメージを設定する簡単なコードを作成しました。

参考にした記事はこちら。

import UIKit

class ViewController: UIViewController {

    lazy var button: UIButton = {
        let button = UIButton()
        let buttonColor = UIColor.link
        let uiImage = createUIImageFromUIColor(color: buttonColor) // UIColorからUIImageを作成
        button.setBackgroundImage(uiImage, for: .normal)

       // ボタンにアイコンイメージを指定する場合
       button.setImage(UIImage(systemsName: "heart.fill"))
       // イメージサイズを可変にする場合
       button.imageView?.contentMode = .scaleAspectFit
       button.contentHorizontalAlignment = .fill
       button.contentVerticalAlignment = .fill
       // アイコンの色を指定
       button.tintColor = UIColor.systemPink
       // ボーダーを指定する場合
       button.layer.borderColor = UIColor.black
       button.layer.borderWidth = 1
       // ボタンにテキストを指定する場合
        button.setTitle("Button", for: .normal)
        button.setTitleColor(.white, for: .normal)
        // コーナーを丸くする場合
        button.layer.cornerRadius = 20
        button.layer.masksToBounds = true
        return button
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(button)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.widthAnchor.constraint(equalToConstant: 100).isActive = true
        button.heightAnchor.constraint(equalToConstant: 50).isActive = true
    }
    
    private func createUIImageFromUIColor(color: UIColor) -> UIImage? {
        let size = CGSize(width: 200, height: 200)
        var colorImage: UIImage?
        
        UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
        if let context = UIGraphicsGetCurrentContext() {
            context.setFillColor(color.cgColor)
            context.fill(CGRect(origin: .zero, size: size))
            colorImage = UIGraphicsGetImageFromCurrentImageContext()
        }
        UIGraphicsEndImageContext()
        return colorImage
    }
    
}

iOS Swift

Videoファイルからフレームを抽出

投稿者作成者: Kobito
投稿日 2022-01-03

Vision Frameworkを使って動画解析をするための前準備として、動画ファイルから毎フレームを抽出し、UIImageViewへ描画するにはどうしたら良いのか。Appleのサンプルコードを勉強し、ミニマム実装をしてみました。

このコードのキモは、AVAssetReaderTrackOutputクラスのcopyNextSampleBuffer()メソッドを利用し、CVPixelBufferオブジェクトを得て、UIImageへ描画することです。

func nextFrame() -> CVPixelBuffer? { 
    guard let sampleBuffer = self.videoAssetReaderOutput.copyNextSampleBuffer() else {
        return nil
    }
    return CMSampleBufferGetImageBuffer(sampleBuffer)
}

while loop内で nextFrame == true を満たす場合にフレームの抽出を続け、

while true {
    guard let frame = videoReader.nextFrame() else {
        break
    }
    // Draw results
    delegate?.displayFrame(frame, withAffineTransform: videoReader.affineTransform)
    usleep(useconds_t(videoReader.frameRateInSeconds))
}

得たframe: CVPixelBufferをdelegateメソッドに送り、ViewController内のUIImageViewに描画します。

func displayFrame(_ frame: CVPixelBuffer?, withAffineTransform transform: CGAffineTransform) {
    DispatchQueue.main.async {
        if let frame = frame {
            let ciImage = CIImage(cvPixelBuffer: frame).transformed(by: transform)
            let uiImage = UIImage(ciImage: ciImage)
            self.imageView.image = uiImage
        }
    }
}

iOS Swift

UIViewの理解のために

投稿者作成者: Kobito
投稿日 2022-01-02

UIViewはUIを構成する基本的なビルディング・ブロックで、ひとつ以上のsubviewを持つことが出来ます。また、UIResponderのサブクラスであり、touchやその他のeventに反応することが出来たり、gesture recognizerを設定することが出来ます。

UIViewControllerのviewプロパティはRoot Viewを保持します。viewプロパティの初期値はnilです。view == nilの時にviewを呼び出すと、UIViewControllerにより自動的にloadView()メソッドが呼ばれます。

boundsとframeの違いについて

boundsは、自身のcoordinate system(0, 0)にrelativeな位置(x, y)とサイズ(width, height)で表されるrectangleです。

frameは、自身のsuperviewにrelativeな位置(x, y)とサイズ(width, height)で表されるrectangleです。

override func viewDidAppear(_ animated: Bool) {
    print(view.bounds)      // CGRect(x: y: width: height:)がプリントされる
    print(view.bounds.size) // CGSize(width: height:)がプリントされる
    print(view.frame)       // CGRect(x: y: width: height:)がプリントされる
　　print(view.frame.size)  // CGSize(width: height:)がプリントされる
}

// this method happens after all the layouts has been done. このメソッドは全てのレイアウト後に呼ばれる
override func layoutSubviews() {
    super.layoutSubviews()
    let layer = sampleImageView.layer
    layer.cornerRadius = 30
}

iOS Swift

UIViewをSwiftUIで使いたい

投稿者作成者: Kobito
投稿日 2021-11-21

筆者はSwiftUIからiOS開発を始めました。ストーリーボードを使わずにコードだけでViewを記述出来るSwiftUIは気に入っていますが、現時点でSwiftUIにないUIViewを使いたい場合は「橋渡し」としてUIViewRepresentableを使うこと実現出来ます。UIViewRepresentable protocolを理解する上で少々とっつきにくかったので記事にしようと思いました。

下記コードは最も基本的なカスタムUIViewをSwiftUIで使ってみている例です。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
            BasicUIViewRepresentable() // 下記structをここでSwiftUIのViewと同様に使用できる
        }
    }
}
struct BasicUIViewRepresentable: UIViewRepresentable {
    func makeUIView(context: Context) -> some UIView { 
　　　　// この必須関数はinitのような役目、some UIViewをreturnする
        let view = UIView() // ベーシックなUIViewインスタンスを生成
        view.backgroundColor = .red // わかり易いように赤色にしてるだけ
        return view
    }
    func updateUIView(_ uiView: UIViewType, context: Context) { 
　　　// この必須関数はSwiftUI側からデータを送りUIView側をアップデートする場合に使用される
    }
}

UIViewRepresentable protocolの記述を見るとより理解が深まると思います。意訳してみました。

public protocol UIViewRepresentable : View where Self.Body == Never {

    /// typealias UIViewType = UITextField などのように提供される型を指定できる
    associatedtype UIViewType : UIView

    /// Viewオブジェクトを生成時に一度だけ呼ばれ、初期ステートを設定する必須メソッド。
    /// 初回以降のViewのアップデートは``UIViewRepresentable/updateUIView(_:context:)``
    /// が呼ばれる。
    /// - パラメータ context: システムの現在のステートを保持するcontext struct
    /// - 戻り値: 提供された情報により設定されたUIKit view
    func makeUIView(context: Self.Context) -> Self.UIViewType

    /// SwiftUIからの情報をもとにViewを更新するメソッド。
    /// appのステートが変化する度に、SwiftUIは該当の情報（@State変数など）を更新し
    /// contextに応じてUIKit Viewの該当箇所を更新することができる。
    /// - パラメータ:
    ///   - uiView: カスタムViewオブジェクト
    ///   - context: システムの現在のステートを保持するcontext struct
    func updateUIView(_ uiView: Self.UIViewType, context: Self.Context)

    /// 対象のUIKit Viewとcoordinatorをクリーンアップするメソッド。
    /// 例としてobserverを取り除く、などに使用できる。
    /// - パラメータ:
    ///   - uiView: カスタムViewオブジェクト
    ///   - coordinator: UIViewからSwiftUIへデータを渡すカスタムコーディネータインスタンス。
    ///     もしカスタムコーディネータを用いない場合は、システムによりデフォルトインスタンス
    ///     が提供される。
    static func dismantleUIView(_ uiView: Self.UIViewType, coordinator: Self.Coordinator)

    /// A type to coordinate with the view.
    associatedtype Coordinator = Void

    /// UIViewからSwiftUIへデータを渡すコーディネータインスタンスを生成。
    /// カスタムCoordinatorインスタンスを用いて@Bindingプロパティを扱うなどをしたい場合
    /// [以下の例: Coordinator]
    ///
    /// このメソッドはSwiftUIにより``UIViewRepresentable/makeUIView(context:)``の前に
    /// 呼ばれる。
    func makeCoordinator() -> Self.Coordinator

    typealias Context = UIViewRepresentableContext<Self>
}

下記はシンプルなUITextFieldViewの実装例

struct UITextFieldViewRepresentable: UIViewRepresentable {
    
    @Binding var text: String
    
    func makeUIView(context: Context) -> UITextField {
        let textField = getTextField()
        textField.delegate = context.coordinator as? UITextFieldDelegate
        return textField
    }
    
    // from SwiftUI to UIKit
    func updateUIView(_ uiView: UITextField, context: Context) {
        uiView.text = text
    }
    
    private func getTextField() -> UITextField {
        let textField = UITextField(frame: .zero)
        let placeHolder = NSAttributedString(string: "Type here", attributes: [.foregroundColor: UIColor.red])
        textField.attributedPlaceholder = placeHolder
        return textField
    }
    
    // from UIKit to SwiftUI
    func makeCoordinator() -> Coordinator {
        return Coordinator(text: $text)
    }
    
    class Coordinator: NSObject, UITextViewDelegate {
        
        @Binding var text: String
        
        init(text: Binding<String>) {
            self._text = text
        }
        private func textFieldDidChangeSelection(_ textField: UITextField) {
            text = textField.text ?? ""
        }
    }
    
    typealias UIViewType = UITextField
}

タグ iOS, Swift, SwiftUI, UIView, UIViewControllerRepresentable, UIViewRpresentable

Recent Posts

Recent Comments

Archives

Categories