Drawing images on top of Paths in Swift - swift

Question

I am modifying this swift radar chart. I would like to draw an image on each of the edge vertices. I cannot figure out how to draw an image at the same time as drawing a path. Barring that, I figured I could let the shape draw itself and then somehow recover the edge vertices from its path and draw images as overlays on the shape, but I cannot figure out how to get those vertices.
So I have two questions, and I only need to know the answer to one of them to proceed.
How can I draw an image at the same time as drawing a path?
How can I pull out the edge vertices of this shape and then use them to draw overlays on the shape (the code below is closer to this version, but I'd rather be able to draw the images at the same time as drawing the path).
import SwiftUI
struct RadarChart: View {
var data: [Double]
let gridColor: Color
let dataColor: Color
private var edgeVertices: [CGPoint]
init(data: [Double], gridColor: Color = .gray, dataColor: Color = .blue) {
self.data = data
self.gridColor = gridColor
self.dataColor = dataColor
self.edgeVertices = []
}
var body: some View {
GeometryReader { geo in
ZStack {
RadarChartGrid(categories: data.count, divisions: 5)
.stroke(gridColor, lineWidth: 0.5)
.overlay(
Image(systemName: "star")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width:20)
.position(x: geo.size.width/2, y: geo.size.height/2)
)
RadarChartPath(data: data)
.fill(dataColor.opacity(0.3))
RadarChartPath(data: data)
.stroke(dataColor, lineWidth: 2.0)
}
.padding(20)
}
}
}
struct RadarChartGrid: Shape {
let categories: Int
let divisions: Int
private func calculateEdgePoints(rect: CGRect) -> [CGPoint]{
var edgeVertices: [CGPoint] = []
let radius = min(rect.maxX - rect.midX, rect.maxY - rect.midY)
for category in 1 ... categories {
let edgePoint = CGPoint(x: rect.midX + cos(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * radius,
y: rect.midY + sin(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * radius)
edgeVertices.append(edgePoint)
}
return edgeVertices
}
func path(in rect: CGRect) -> Path {
let radius = min(rect.maxX - rect.midX, rect.maxY - rect.midY)
let stride = radius / CGFloat(divisions)
var path = Path()
for category in 1 ... categories {
path.move(to: CGPoint(x: rect.midX, y: rect.midY))
path.addLine(to: CGPoint(x: rect.midX + cos(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * radius,
y: rect.midY + sin(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * radius))
}
for step in 1 ... divisions {
let rad = CGFloat(step) * stride
path.move(to: CGPoint(x: rect.midX + cos(-.pi / 2) * rad,
y: rect.midY + sin(-.pi / 2) * rad))
for category in 1 ... categories {
path.addLine(to: CGPoint(x: rect.midX + cos(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * rad,
y: rect.midY + sin(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * rad))
}
}
return path
}
}
struct RadarChartPath: Shape {
let data: [Double]
func path(in rect: CGRect) -> Path {
guard
3 <= data.count,
let minimum = data.min(),
0 <= minimum,
let maximum = data.max()
else { return Path() }
let radius = min(rect.maxX - rect.midX, rect.maxY - rect.midY)
var path = Path()
for (index, entry) in data.enumerated() {
switch index {
case 0:
path.move(to: CGPoint(x: rect.midX + CGFloat(entry / maximum) * cos(CGFloat(index) * 2 * .pi / CGFloat(data.count) - .pi / 2) * radius,
y: rect.midY + CGFloat(entry / maximum) * sin(CGFloat(index) * 2 * .pi / CGFloat(data.count) - .pi / 2) * radius))
default:
path.addLine(to: CGPoint(x: rect.midX + CGFloat(entry / maximum) * cos(CGFloat(index) * 2 * .pi / CGFloat(data.count) - .pi / 2) * radius,
y: rect.midY + CGFloat(entry / maximum) * sin(CGFloat(index) * 2 * .pi / CGFloat(data.count) - .pi / 2) * radius))
}
}
path.closeSubpath()
return path
}
}
struct RadarChart_Previews: PreviewProvider {
static var previews: some View {
RadarChart(data: [1, 2, 4, 3, 5, 2, 3])
}
}
The above code produces this image. Note that I would like to put a different image on each vertex, but cannot figure out how to get the vertices.

Answer 1

For posterity and for anyone who also struggled in piecing together how to do stuff on the canvas, here is an implementation following what #rob mayoff said by drawing everything on the canvas.
import SwiftUI
struct RadarChart: View {
var data: [Double]
let gridColor: Color
let fillColor: Color
let strokeColor: Color
let divisions: Int
let radiusBuffer: Double
init(data: [Double], gridColor: Color = .gray, fillColor: Color = .blue, strokeColor: Color = .blue, divisions: Int = 10, radiusBuffer: Double = 0.0) {
self.data = data
self.gridColor = gridColor
self.fillColor = fillColor
self.strokeColor = strokeColor
self.divisions = divisions
self.radiusBuffer = radiusBuffer
}
var body: some View {
Canvas { context, size in
let edges = calculateEdgePoints(rect: context.clipBoundingRect, categories: data.count)
let radarCharGridPath = radarChartGridPath(in: context.clipBoundingRect, categories: data.count)
let dataPath = radarChartPath(in: context.clipBoundingRect)
context.stroke(radarCharGridPath, with: .color(gridColor), lineWidth: 0.5)
context.fill(dataPath, with: .color(fillColor.opacity(0.3)))
context.stroke(dataPath, with: .color(strokeColor), lineWidth: 2.0)
for idx in 0...data.count-1 {
var edge = edges[idx]
let image = Image(systemName: "star.fill")
let imageEdgeSize = 20.0
edge.x -= imageEdgeSize / 2
edge.y -= imageEdgeSize / 2
let rect = CGRect(origin: edge, size: CGSize(width:imageEdgeSize, height:imageEdgeSize))
context.draw(image, in: rect)
}
}.navigationBarTitle("Radar Chart")
}
private func calculateEdgePoints(rect: CGRect, categories: Int) -> [CGPoint] {
var edgeVertices: [CGPoint] = []
let radius = min(rect.maxX - rect.midX, rect.maxY - rect.midY) - radiusBuffer
print("Edgepoints radius: \(radius)")
for category in 1 ... categories {
let edgePoint = CGPoint(x: rect.midX + cos(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * radius,
y: rect.midY + sin(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * radius)
edgeVertices.append(edgePoint)
}
return edgeVertices
}
func radarChartGridPath(in rect: CGRect, categories: Int) -> Path {
let radius = min(rect.maxX - rect.midX, rect.maxY - rect.midY) - radiusBuffer
let stride = radius / CGFloat(divisions)
var path = Path()
for category in 1 ... categories {
path.move(to: CGPoint(x: rect.midX, y: rect.midY))
path.addLine(to: CGPoint(x: rect.midX + cos(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * radius,
y: rect.midY + sin(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * radius))
}
for step in 1 ... divisions {
let rad = CGFloat(step) * stride
path.move(to: CGPoint(x: rect.midX + cos(-.pi / 2) * rad,
y: rect.midY + sin(-.pi / 2) * rad))
for category in 1 ... categories {
path.addLine(to: CGPoint(x: rect.midX + cos(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * rad,
y: rect.midY + sin(CGFloat(category) * 2 * .pi / CGFloat(categories) - .pi / 2) * rad))
}
}
return path
}
func radarChartPath(in rect: CGRect) -> Path {
guard
3 <= data.count,
let minimum = data.min(),
0 <= minimum,
let maximum = data.max()
else { return Path() }
let radius = min(rect.maxX - rect.midX, rect.maxY - rect.midY) - radiusBuffer
var path = Path()
for (index, entry) in data.enumerated() {
switch index {
case 0:
path.move(to: CGPoint(x: rect.midX + CGFloat(entry / maximum) * cos(CGFloat(index) * 2 * .pi / CGFloat(data.count) - .pi / 2) * radius,
y: rect.midY + CGFloat(entry / maximum) * sin(CGFloat(index) * 2 * .pi / CGFloat(data.count) - .pi / 2) * radius))
default:
path.addLine(to: CGPoint(x: rect.midX + CGFloat(entry / maximum) * cos(CGFloat(index) * 2 * .pi / CGFloat(data.count) - .pi / 2) * radius,
y: rect.midY + CGFloat(entry / maximum) * sin(CGFloat(index) * 2 * .pi / CGFloat(data.count) - .pi / 2) * radius))
}
}
path.closeSubpath()
return path
}
}
func makeList(_ n: Int) -> [Double] {
return (0..<n).map{ _ in Double.random(in: 1 ... 20) }
}
struct RadarChart_Previews: PreviewProvider {
static var previews: some View {
RadarChart(
data: makeList(30),
divisions: 5,
radiusBuffer: 10
)
.padding()
}
}