首页 > 解决方案 > 为 SwiftUI Path 元素添加阴影

问题描述

我有一个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)

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

在此处输入图像描述

标签: iosswiftswiftuishadow

解决方案


这是一个例子

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)

推荐阅读