向 SwiftUI 路径元素添加阴影

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 :

        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))

看（新）：