SwiftUI ドラッグで矢印を作りたい

Question

前提・実現したいこと

タップした位置から、ドラッグして指を移動させ、指を離した位置までに矢印が作られる機能を作りたいです。
※EverNoteの「Skitch」の矢印ようなイメージ

操作の流れは以下の通りです
①任意の画像を選択し、画像を表示させる。
②画像上の任意の位置でタップする（矢印の起点となる）
③タップした位置から任意の位置までドラッグする（ドラッグ中は指に追従して矢印の先端が伸びる）
④指を離した時点で矢印が確定する（起点から離した位置までの長さの矢印になる）
⑤作られた矢印はタップすると掴むことができ、ドラッグしてそのままの形で移動、
回転と長さの変更（矢印の先端と末端の2か所を掴むことができ、その位置を掴んでドラッグして行う）
⑥不要な矢印はタップした後、別に置いた削除ボタンで削除できる。
⑦矢印は同じ画面上に複数作ることができる。

試したこと

私はアプリ開発の初心者で「SwiftUI iPhoneアプリ開発入門ノート[2020]」という書籍を読んでサンプルアプリを一通り作ったレベルです。
ネットで調べるとDragGestureでドラッグで移動ができるというところまでは試せたのですが、それ以上がどうしてもわかりません。

「ここを参考にしたらいい」「こういうクラスを使用したらいい」「実現するための勉強方法」などヒントをいただけませんでしょうか。

Comments

[hoshi-takanori]

やりたいことがよく分からないので教えてください。その矢印は、画像の上に表示する感じでしょうか？また、 一度作った矢印を消したり動かしたりしたいですか？ 最終的には作った矢印をどうしたいですか？

[cmcm_a]

早速の回答をありがとうございます。
本文中に追記しましたのでご確認を願いします。

Answer 1

えっと、まず画像の上に図形を描画する必要がありますよね。とりあえずこんな感じでしょうか。
(Arrow と言いつつ単なる線ですが…。矢印にする方法はご自分で考えてください。)

struct Arrow {
    let start: CGPoint
    let end: CGPoint

    func draw(path: inout Path) {
        path.move(to: start)
        path.addLine(to: end)
    }
}

struct ContentView: View {
    let arrow = Arrow(start: CGPoint(x: 50, y: 50), end: CGPoint(x: 250, y: 250))

    var body: some View {
        ZStack {
            Image(systemName: "tortoise")
                .resizable()
                .scaledToFit()
                .foregroundColor(.green)

            Path(arrow.draw)
                .stroke()
                .foregroundColor(.red)
        }
        .frame(width: 300, height: 300)
        .border(Color.black)
    }
}

ドラッグして線を引くには DragGesture を使います。指を動かすと onChanged が呼ばれるので、始点 (value.startLocation) と終点 (value.location) の間に線を引きます。

struct ContentView: View {
    @State var currentArrow: Arrow?

    var body: some View {
        ZStack {
            Image(systemName: "tortoise")
                .resizable()
                .scaledToFit()
                .foregroundColor(.green)

            if let arrow = currentArrow {
                Path(arrow.draw)
                    .stroke()
                    .foregroundColor(.blue)
            }
        }
        .frame(width: 300, height: 300)
        .border(Color.black)
        .gesture(
            DragGesture(minimumDistance: 0.1)
                .onChanged { value in
                    currentArrow = Arrow(start: value.startLocation, end: value.location)
                }
        )
    }
}

さらに、過去に引いた線を覚えておくにはそれを配列か何かで保持すると良いでしょう。

struct ContentView: View {
    @State var arrows = [Arrow]()
    @State var currentArrow: Arrow?

    var body: some View {
        ZStack {
            Image(systemName: "tortoise")
                .resizable()
                .scaledToFit()
                .foregroundColor(.green)

            ForEach(0..<arrows.count, id: .self) { index in
                Path(arrows[index].draw)
                    .stroke()
                    .foregroundColor(.red)
            }

            if let arrow = currentArrow {
                Path(arrow.draw)
                    .stroke()
                    .foregroundColor(.blue)
            }
        }
        .frame(width: 300, height: 300)
        .border(Color.black)
        .gesture(
            DragGesture(minimumDistance: 0.1)
                .onChanged { value in
                    currentArrow = Arrow(start: value.startLocation, end: value.location)
                }
                .onEnded { value in
                    arrows.append(Arrow(start: value.startLocation, end: value.location))
                    currentArrow = nil
                }
        )
    }
}

(ヒントになってなくてごめんなさい。)

Comments

[cmcm_a]

ありがとうございます。思っていた通りの動きで大変参考になりました。