为 SwiftUI Path 元素添加阴影

Question

我有一个基本的ClockView 使用 SwiftUI 构建。 :) 我的问题是，如果使用这种方法很容易将阴影应用于时钟指针，或者我需要不同的布局和元素分组？我试图找到一种向Path 添加阴影的方法，但被卡住了。谢谢。

代码

import SwiftUI

struct ClockView: View {
    @Binding var time : TimeValue
    let hoursHandWidth = 10
    let minutesHandWidth = 10
    let secondsHandWidth = 10

    var body: some View {

        return(
            ZStack {
                // clock-face
                Path { path in
                    let seconds : Path = Path(CGRect(x: 100, y: -0.5, width: 10, height: 1))
                    for i in 0...60 {
                        …
                        }
                }
                .fill(Color(red: 0.3, green: 0.3, blue: 0.3, opacity: 1.0))
                Path { path in
                    let hours : Path = Path(CGRect(x: 100, y: -1, width: 12, height: 2))
                    for i in 0...12 {
                        …
                        }
                }
                .fill(Color(red: 0.3, green: 0.3, blue: 0.3, opacity: 1.0))
                Path { path in
                    let threehours : Path = Path(CGRect(x: 95, y: -2, width: 20, height: 4))
                    for i in 0...4 {
                        …
                        }
                }
                .fill(Color.red)
                // clock-hands
                Path { path in
                    let minutehand : Path = Path(CGRect(x: 0, y: -(minutesHandWidth/2), width: 95, height: minutesHandWidth))
                    path.addPath(minutehand, …)
                }
                .fill(Color.blue)
                Path { path in
                    let hourhand : Path = Path(CGRect(x: 0, y: -(hoursHandWidth/2), width: 72, height: hoursHandWidth))
                    path.addPath(hourhand, …)
                }
                .fill(Color.blue)
                Path { path in
                    let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
                    path.addPath(secondshand, …)
                }
                .fill(Color.yellow)
                .animation(.easeInOut)
                Path { path in
                    path.addPath(Path(CGPath(ellipseIn: CGRect(x: -5, y: -5, width: 10, height: 10), transform: nil)))
                }
                .fill(Color.black)
            }
            .offset(CGSize(width: 150, height: 150))
            .frame(width: 300, height: 300, alignment: .topLeading)
            .scaleEffect(1.2)
            .background(Color(red: 0.8, green: 0.8, blue: 0.8, opacity: 1.0))
        )
    }
 }

看

** 更新**

我已将.shadow(..) 申请为用户Asperi recommended：

        Path { path in
            let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
            path.addPath(secondshand, transform: .init(rotationAngle: 2.0 * CGFloat.pi * CGFloat(time.seconds-15)/60.0))
        }
        .fill(Color.yellow)
        .shadow(color: .black, radius: 8, x: 1, y: 1)

但结果并不完全符合我的预期:)

Answer 1

这是一个例子

Path { path in
    let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
    path.addPath(secondshand)
}
.fill(Color.yellow)
.shadow(color: .black, radius: 8, x: 4, y: 1)

Answer 2

我已将转换（旋转）从子路径移至结果路径。现在看起来不错。

旧：

   Path { path in
      let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
      path.addPath(secondshand, transform: .init(rotationAngle: 2.0 * CGFloat.pi * CGFloat(time.seconds-15)/60.0))
   }
   .fill(Color.yellow)
   .shadow(color: .black, radius: 2)

新：

   Path { path in
      let secondshand : Path = Path(CGRect(x: 0, y: -(secondsHandWidth/2), width: 97, height: secondsHandWidth))
      path.addPath(secondshand)
   }
   .fill(Color.yellow)
   .shadow(color: .black, radius: 2)
   .transformEffect(CGAffineTransform(rotationAngle: 2.0 * CGFloat.pi * CGFloat(time.seconds-15)/60.0))

看（新）：