『Swift』 PathとUIImageを合成した画像の更新方法について

実現したいこと

-主な動き-
星座リストの星座がタップされるたびに、
①Firestoreの座標情報をもとにPathを作る(実装済)
②Pathと背景画像を合成して表示(実装済)
③二個目以降の星座がタップされたらそれに応じて複数の星座が表示される(ここが出来ない

一つしかPathが表示されないのでそれを改善したい

発生している問題・分からないこと

先述した通りの動きが実現できない、方法がわからないのでアドバイスが欲しい

該当のソースコード

TestUniverse02

1import SwiftUI 2import Firebase 3import FirebaseAuth 4import FirebaseFirestore 5 6class MyImage { 7 var image: UIImage! 8 let size: CGSize = UIScreen.main.bounds.size 9 10 let myPath: MyPath 11 init(points: [CGPoint]) { 12 let universe = UIImage(named: "universe0")! 13 myPath = MyPath(points: points) 14 image = makeImage(universe) 15 } 16 17 func makeImage(_ universe0Image: UIImage) -> UIImage { 18 var image = UIImage() 19 UIGraphicsBeginImageContextWithOptions(size, false, 3) 20 let context = UIGraphicsGetCurrentContext() 21 22 context?.translateBy(x: 0, y: size.height) 23 context?.scaleBy(x: 1.0, y: -1.0) 24 25 26 universe0Image.draw(in: CGRect(origin: .zero, size: size)) 27 28 if let context = context { 29 context.saveGState() 30 context.addPath(myPath.getPath()) 31 32 UIColor.white.setStroke() 33 context.setLineWidth(1) 34 context.drawPath(using: .stroke) 35 36 image = UIGraphicsGetImageFromCurrentImageContext()! 37 context.restoreGState() 38 UIGraphicsEndImageContext() 39 } 40 return image 41 } 42} 43 44struct MyPath: Shape { 45 46 let points: [CGPoint] 47 48 49 func path(in rect: CGRect) -> Path { 50 return Path(getPath()) 51 } 52 53 func getPath() -> CGMutablePath { 54 let path = CGMutablePath() 55 56 guard let firstPoint = points.first else { 57 return path 58 } 59 60 path.move(to: firstPoint) 61 62 for point in points.dropFirst() { 63 path.addLine(to: point) 64 } 65 66 path.closeSubpath() 67 68 return path 69 } 70} 71 72struct TestUniverse02: View { 73 @State private var showingConstellations = false 74 @State private var constellations: [Constellation] = [] 75 @State var index: Int = 0 76 77 var body: some View { 78 ZStack{ 79 VStack { 80 if !constellations.isEmpty { 81 Image(uiImage: MyImage(points: constellations[index].points).image) 82 } else { 83 Image(uiImage: MyImage(points: []).image) 84 } 85 } 86 .padding() 87 88 Button(action: { 89 self.showingConstellations.toggle() 90 if self.showingConstellations { 91 self.fetchConstellations() 92 } 93 }) { 94 Text("+") 95 .foregroundColor(.white) 96 .padding() 97 .background(Color.blue) 98 .cornerRadius(8) 99 } 100 .position(x: UIScreen.main.bounds.width - 40, y: UIScreen.main.bounds.height - 40) 101 102 if showingConstellations { 103 ConstellationListView(constellations: constellations, index: $index, showingConstellations: $showingConstellations) 104 } 105 } 106 } 107 108 //Firestoreの情報 109 func fetchConstellations() { 110 guard let user = Auth.auth().currentUser else { 111 print("User is not logged in") 112 return 113 } 114 115 let db = Firestore.firestore() 116 db.collection("users").document(user.uid).collection("constellations").getDocuments { querySnapshot, error in 117 guard let documents = querySnapshot?.documents else { 118 print("No documents") 119 return 120 } 121 122 self.constellations = documents.map { queryDocumentSnapshot in 123 let data = queryDocumentSnapshot.data() 124 let id = queryDocumentSnapshot.documentID 125 let name = data["name"] as? String ?? "" 126 let points = (data["points"] as? [[String: CGFloat]])?.map { CGPoint(x: $0["x"] ?? 0, y: $0["y"] ?? 0) } ?? [] 127 128 return Constellation(id: id, name: name, points: points) 129 } 130 } 131 } 132 133 //星座リスト 134 struct ConstellationListView: View { 135 let constellations: [Constellation] 136 @Binding var index: Int 137 @Binding var showingConstellations: Bool 138 139 var body: some View { 140 VStack { 141 Text("星座") 142 .font(.title) 143 .padding() 144 145 List(constellations) { constellation in 146 Button(action: { 147 // indexが得られていると仮定する 148 if let selectedIndex = constellations.firstIndex(where: { $0.id == constellation.id }) { 149 index = selectedIndex 150 } 151 showingConstellations = false 152 }) { 153 Text(constellation.name) 154 .padding() 155 } 156 } 157 } 158 .background(Color.white) 159 .cornerRadius(10) 160 .padding() 161 .shadow(radius: 5) 162 } 163 } 164} 165 166struct TestUniverse02_Previews: PreviewProvider { 167 static var previews: some View { 168 TestUniverse02() 169 } 170} 171

試したこと・調べたこと

上記の詳細・結果

似たような境遇の方を探したが見つからなかった
調べ方がいまいちわからなかった

補足

特になし

コメントを投稿

0 コメント