I tried to solve the issue trying to "mask" a square with this shape using eoFill: true on the fill and in the process found the following:
If I add a CGRect that reaches both top as bottom of this "BadgeBackground" shape the fill colors the entire shape. This CGRect does not have to be visible (width: 0)
import SwiftUI
struct BadgeBackground: View {
static let gradientStart = Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255)
static let gradientEnd = Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)
var body: some View {
GeometryReader { geometry in
Path { path in
var width: CGFloat = min(geometry.size.width, geometry.size.height)
let height = width
let xScale: CGFloat = 0.832
let xOffset = (width * (1.0 - xScale)) / 2.0
width *= xScale
path.move(
to: CGPoint(
x: width * 0.95 + xOffset,
y: height * (0.20 + HexagonParameters.adjustment)
)
)
HexagonParameters.segments.forEach { segment in
path.addLine(
to: CGPoint(
x: width * segment.line.x + xOffset,
y: height * segment.line.y
)
)
path.addQuadCurve(
to: CGPoint(
x: width * segment.curve.x + xOffset,
y: height * segment.curve.y
),
control: CGPoint(
x: width * segment.control.x + xOffset,
y: height * segment.control.y
)
)
}
path.addRect(CGRect(x: width/2, y: 0, width: 0, height: min(geometry.size.width, geometry.size.height)))
}
.fill(LinearGradient(gradient: Gradient(colors: [Self.gradientStart, Self.gradientEnd]),
startPoint: UnitPoint(x: 0.5, y: 0),
endPoint: UnitPoint(x: 0.5, y: 0.6))
)
}
}
}
#Preview {
BadgeBackground()
}
Topic:
UI Frameworks
SubTopic:
SwiftUI
Tags: