UIImageViewに赤い円を表示させたい

Question

画面をタッチした時の動作について勉強しています。
（Xcode version13.0）

UIImageViewを配置しそのView内をタッチした時に赤い円を表示させたいです。
UIImageViewにtap gesture recognizerを配置することによってView内のタップ認識ができることはネットの検索により知りました。

しかし，どのようにコードを書くと「タッチ時に赤い円を表示する」のかが分かっておりません。

赤い円のサイズ等に関しては後々変更したいと考えておりますが，まずはどのようにコードを書くと赤い円の表示する方法を知りたいと思い，質問を投稿させていただきました。

不明瞭な点も幾つもあるとは思いますが，
よろしければご教授頂けますと幸いでございます。

Comments

[hoshi-takanori]

画像の上に赤い円を表示したいってことだと思いますが、その先どうしたいのかによってやり方はいくつか考えられます。
とりあえずお絵描きアプリの開発方法について学ぶと良いのでは…。

[退会済みユーザー]

回答を放置されたままですが質問と意図と異なるものでしたか？その場合は知りたい内容とどう違うのかコメント等にご記載ください

[blacknill]

返信が遅くなりました。
少々都合に負われておりましてご意見/ご回答の確認ができておりませんでした。
>hoshi-takanoriさん
ご意見ありがとうございます。
お絵描きアプリについて調べてみようと思います。
>ycv57u6yさん
回答ありがとうございます。
まだまだ未熟者でございまして「サブクラスの作り方？」という状況でございます。
サブクラスの作り方を勉強し（難航しておりますが...），ご回答いただきました方法で確認できましたら
評価(ベストアンサー/高評価)を押させていただきたく存じます。

Answer 1

描画用のカスタムビューを用意する

任意の図形を描画するには UIView のサブクラスを作り、draw(_:) メソッドをオーバーライドします。描画のパスは UIBezierPath で作成し、色は UIColor で指定します。弧を作成するメソッドを利用して円を作成できます。

例: RedCircleView

import UIKit

class RedCircleView: UIView {
  override init(frame: CGRect) {
    super.init(frame: frame)
    prepare()
  }
  
  required init?(coder: NSCoder) {
    super.init(coder: coder)
    prepare()
  }
  
  func prepare() {
    // 背景色を透明にして他のビューの子にしたとき背景色で塗りつぶさないようにする
    self.backgroundColor  = .clear
    
    // お好みで…………
    self.autoresizingMask = [.flexibleWidth, .flexibleHeight]
  }
  
  override func draw(_ rect: CGRect) {
    super.draw(rect)
    
    // 中心座標と短辺を計算しておく
    let center    = CGPoint(x: rect.size.width / 2.0, y: rect.size.height / 2.0)
    let shortSide = min(rect.size.width, rect.size.height)
    
    // 円のパスを作成
    let lineWidth = CGFloat(8.0)
    let redCircle = UIBezierPath(
      arcCenter: center,                 // 弧の中心座標
      radius: shortSide / 2 - lineWidth, // 半径
      startAngle: 0,                     // 弧の描画開始角度
      endAngle: CGFloat(Double.pi) * 2,  // 弧の描画終了角度
      clockwise: true                    // 時計回りに描画するか
    )
    
    // 線の色と太さをセットして描画
    UIColor(red: 1, green: 0, blue: 0, alpha: 1).setStroke()
    redCircle.lineWidth = lineWidth
    redCircle.stroke()
  }
}

タップジェスチャーのアクションでイメージビューに貼り付ける

イメージビューと同じ大きさのカスタムビューを生成して貼り付ければイメージビューの中に赤い丸を描画できます。

import UIKit

class ViewController: UIViewController {
  @IBOutlet weak var imageView: UIImageView!
  
  @IBAction func didTapImageView(_ sender: Any) {
    if (self.imageView.viewWithTag(1) == nil) {
      let redCircleView = RedCircleView(frame: self.imageView.bounds)
      redCircleView.tag = 1
      self.imageView.addSubview(redCircleView)
    } else {
      print("Already added a red circle view.")
    }
  }
}

---

なお、さらに色々な図形を頻繁に追加・削除するようであれば SpriteKit でコンテンツを作成するほうが便利ですよ。例えば、円などはシェイプノードを追加するだけなのでカスタムビューが不要です。