Hey there! I have a Circle, and I would like to create many on this circle and display them in random position on the screen. Is it possible?
Thanks in advance.
What do you mean without animation ? Without the button action ?
Then just do this:
struct ContentView: View {
@State var xPos: [CGFloat] = [CGFloat.random(in: 50...300), CGFloat.random(in: 50...300), CGFloat.random(in: 50...300)]
@State var yPos: [CGFloat] = [CGFloat.random(in: 50...500), CGFloat.random(in: 50...500), CGFloat.random(in: 50...500)]
let colors: [Color] = [.red, .green, .blue]
var body: some View {
GeometryReader { geometry in
ForEach ((0..<xPos.count), id: \.self) {
Circle()
.foregroundColor(colors[$0])
.frame(width: 80, height: 80)
.position(x: xPos[$0], y: yPos[$0])
}
}
}
}
.
create many on this circle and display them in random position
Do you mean inside the large circle ? On the border of it ?
Yes! Thank you very much! :)
See here and mark as answered: https://developer.apple.com/tutorials/swiftui/drawing-paths-and-shapes and here https://developer.apple.com/documentation/swiftui/add_rich_graphics_to_your_swiftui_app
Use GeometryReader.
To display one circle:
struct ContentView: View {
@State var xPos: CGFloat = 100
@State var yPos: CGFloat = 100
var body: some View {
GeometryReader { geometry in
Circle()
.foregroundColor(Color.red)
.frame(width: 80, height: 80)
.position(x: xPos, y: yPos)
Spacer(minLength: 20)
Button(
action: {
xPos = CGFloat.random(in: 50...300)
yPos = CGFloat.random(in: 50...500)
},
label: {
Text("Move")
}
)
}
}
If you have several, you should get them in an array and loop through elements to set their coordinates randomly in the same way.
struct ContentView: View {
@State var xPos: [CGFloat] = [100, 100, 100]
@State var yPos: [CGFloat] = [200, 200, 200]
let colors: [Color] = [.red, .green, .blue] // Must have same number of items in all 3
var body: some View {
GeometryReader { geometry in
ForEach ((0..<xPos.count), id: \.self) {
Circle()
.foregroundColor(colors[$0])
.frame(width: 80, height: 80)
.position(x: xPos[$0], y: yPos[$0])
}
Spacer(minLength: 20)
Button(
action: {
for i in 0..<xPos.count {
xPos[i] = CGFloat.random(in: 50...300)
yPos[i] = CGFloat.random(in: 50...500)
}
},
label: {
Text("Move")
}
)
}
}
}
@Claude31, it's right. But I want it without the animation, so display different circles in different positions but without the animation.
What do you mean without animation ? Without the button action ?
Then just do this:
struct ContentView: View {
@State var xPos: [CGFloat] = [CGFloat.random(in: 50...300), CGFloat.random(in: 50...300), CGFloat.random(in: 50...300)]
@State var yPos: [CGFloat] = [CGFloat.random(in: 50...500), CGFloat.random(in: 50...500), CGFloat.random(in: 50...500)]
let colors: [Color] = [.red, .green, .blue]
var body: some View {
GeometryReader { geometry in
ForEach ((0..<xPos.count), id: \.self) {
Circle()
.foregroundColor(colors[$0])
.frame(width: 80, height: 80)
.position(x: xPos[$0], y: yPos[$0])
}
}
}
}
.
create many on this circle and display them in random position
Do you mean inside the large circle ? On the border of it ?
Yes! Thank you very much! :)
@Claude31 I have one more little question. If I would like to add more circle than 3, where should I edit the code?