はじめに
削って何の絵が出てくるでしょう?みたいなスクラッチゲームを作ってみます。
サンプルアプリ
実装
import SwiftUI
struct DrawLine: Identifiable {
let id = UUID()
var points: [CGPoint]
}
struct ContentView: View {
@State private var pastLines: [DrawLine] = []
@State private var currentLine: DrawLine?
var body: some View {
VStack {
Text("スクラッチ")
.font(.title)
Text("削れ")
.font(.title2)
Image(.icon)
.resizable()
.scaledToFit()
.gesture(dragGesture)
.mask(maskView)
.border(.black)
Button {
pastLines = []
} label: {
Text("リセット")
}
}
}
private var dragGesture: some Gesture {
DragGesture(minimumDistance: 0, coordinateSpace: .local)
.onChanged({ value in
if currentLine == nil {
currentLine = DrawLine(points: [])
}
guard var line = currentLine else { return }
line.points.append(value.location)
currentLine = line
})
.onEnded({ value in
guard var line = currentLine else { return }
line.points.append(value.location)
pastLines.append(line)
currentLine = nil
})
}
private var maskView: some View {
ZStack {
ForEach(pastLines) { line in
Path { path in
path.addLines(line.points)
}
.stroke(Color.red, lineWidth: 20)
}
.clipped()
Path { path in
guard let line = currentLine else { return }
path.addLines(line.points)
}
.stroke(Color.red, lineWidth: 20)
.clipped()
}
}
}
おわり
これを応用すれば、なぞった部分だけモザイクをかけるといったアプリを作ることができますね
参考記事