SwiftUIでギターフレットを描画

Swift UI で ギターフレットを描画

ギターのアプリを作りたい。

とりあえずフレット描画してみる。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Canvas { context, size in
                let topMargin = 50.0
                let leftMargin = 20.0
                let rowheight = (size.height - 160) / 5
                let fletwidth = (size.width - 100) / 12
                                for col in 0...12 {
                    for row in 0...5 {
                        let xpos = leftMargin + (fletwidth * CGFloat(col))
                        let ypos = topMargin + (rowheight * CGFloat(row))

                        if col == 0 {
                            context.draw(
                                Text("\(row+1)").font(.title2), at: CGPoint(x:xpos + fletwidth/2, y:ypos))
                        } else {
                            if row == 5 {
                                context.draw(
                                    Text("\(col)").font(.title2), at: CGPoint(x:xpos + fletwidth/2, y:ypos + 25))
                                                            } else {
                                context.stroke(
                                    Path(CGRect(x: xpos,
                                                y: ypos,
                                                width: fletwidth,
                                                height: rowheight )),
                                    with: .color(.blue)
                                )
                            }
                        }
                    }
                }
            }
            .border(Color(cgColor: .init(red: 0, green: 0, blue: 0, alpha: 1)))
        }
        .frame(width: 800, height: 360)
        .border(Color(cgColor: .init(red: 1, green: 0, blue: 0, alpha: 1)))
    }
}

Follow me!

@pppiroto