Странная теневая ошибка при использовании маски

Question

Ты знаешь, как избавиться от этого странного теневого поведения? Тень должна не показывать линию круга. Круговая линия должна быть только внутри прямоугольника

var body: some View {
    VStack {
        ZStack {
            Rectangle()
                .fill(Color.yellow)
                .cornerRadius(25)
                .frame(width: 300, height: 700)
                .padding(.leading, 30)
                .padding(.trailing, 30)
                .shadow(color: .gray, radius: 12, x: 0, y: 4)

            Rectangle()
                .fill(Color.white)
                .opacity(0.2)
                .cornerRadius(25)
                .frame(width: 1300, height: 1300)
                .mask (
                    Circle()
                        .fill(Color.backgroundColor)
                        .offset(x: 80, y: -900)
            )
        }
    }
}

Answer 1

Сначала сделайте ваш View more «generi c»

struct MyView: View {
    let relativeRadius: CGFloat
    let unitPoint: UnitPoint
    let color: Color
    let cornerRadius: CGFloat
    let shadowRadius: CGFloat
    var body: some View {
        GeometryReader { proxyOuter in
            Rectangle().fill(self.color)
        .overlay(
            GeometryReader { proxy in
            Circle()
                .fill(Color.primary.opacity(0.2))
                .colorInvert().offset(x: proxy.size.width * self.unitPoint.x, y: -proxy.size.height * self.unitPoint.y)
                .frame(width: proxy.size.width * self.relativeRadius, height: proxy.size.height * self.relativeRadius)
            }
        )
            .frame(width: proxyOuter.size.width, height: proxyOuter.size.height)
            // mask is redundant if using .cornerRadius, which is "mask" as well 
            .mask(Color.primary)
                .cornerRadius(self.cornerRadius)
                // see more parameters for shadow
                // i like :-)
                // .shadow(color: Color.secondary, radius: self.shadowRadius, x: self.shadowRadius, y: self.shadowRadius)
                .shadow(radius: self.shadowRadius)
        }
    }
}

и затем используйте его «стандартным способом»

struct ContentView: View {
    var body: some View {
        MyView(relativeRadius: 1.5, unitPoint: UnitPoint(x: 0.2, y: 0.75), color: Color.yellow, cornerRadius: 30, shadowRadius: 10)
            .frame(width: 300, height: 300, alignment: .center)
            // to see the bounding box (used for stacking), uncomment next line
            //.border(Color.red)
    }
}

, и здесь вы можете увидеть результат