Given the oblong shape, is there a way to create evenly spaced shapes (circles, in this case) along the border of the parent shape?
struct PokerTableView: View {
@Binding var tableSize: CGSize
@State var NumberOfSeats: Int = 9
var body: some View {
GeometryReader { imgGeo in
ZStack {
VStack {
RoundedRectangle(cornerRadius: 200)
.fill(.gray)
.stroke(Color(hex: 0x1F2C21, alpha: 0.4), lineWidth: 2)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 140)
.padding(30)
}
}
}
The effect I am trying to reproduce is attached.
2
The answer to Place views evenly distributed along a path describes a possible technique (it was my answer). Here is how it could be adapted to your specific case:
private var tablePockets: some View {
GeometryReader { proxy in
let rect = CGRect(origin: .zero, size: proxy.size)
let path = RoundedRectangle(cornerRadius: 200).path(in: rect)
let nPostions = 10
let quarterAdjustment = Double(nPostions) / 4.0
ForEach(1...nPostions, id: .self) { n in
let pos = Double(n) - quarterAdjustment
let fraction: Double = pos < 0
? (pos + Double(nPostions)) / Double(nPostions)
: pos / Double(nPostions)
if n < nPostions, let position = path.trimmedPath(from: 0, to: fraction).currentPoint {
Circle()
.fill(.black)
.stroke(.gray, lineWidth: 3)
.overlay {
Text("(n)")
.font(.title)
.foregroundStyle(.white)
}
.frame(width: 50, height: 50)
.position(position)
}
}
}
}
You will notice that an adjustment of one-quarter of the path is deducted when computing the position for each point. This is because, the path of a rounded rectangle begins and ends at the 3 o’ clock position along the outline. The adjustment ensures that the last point is shown at the 12 o’ clock position, instead of at 3 o’ clock.
Actually, the last point is not shown at all. Instead, a space is left for adding an overlay in this position.
In your original image, the pockets appear to be slightly inside the shape, rather than exactly on the border. To achieve this effect, just add a little padding to the layer with the pockets. You might want to use a RadialGradient for the background:
ZStack(alignment: .top) {
RoundedRectangle(cornerRadius: 200)
.fill(
RadialGradient(
colors: [.green, .black],
center: .center,
startRadius: 0,
endRadius: 500
)
)
.stroke(.brown, lineWidth: 3)
tablePockets
.padding(5)
RoundedRectangle(cornerRadius: 5)
.fill(.yellow)
.frame(width: 70, height: 40)
.padding(.top, -10)
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 150)
.padding()
0