Search code examples
iosswiftswiftuishadow

Add drop shadow to SwiftUI Path elements


I have a rudimentary ClockView build with SwiftUI. :) My question is if applying drop shadows to the clock-hands is easily possible with this approach or if i need a different layout and grouping of the elements? I've tried to find a way to add shadows to Path, but got stuck. Thank you.

Code

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

Look

enter image description here

** Update **

I've applied .shadow(..) as user 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)

But the result is not exactly what i expected :)

enter image description here


Solution

  • I've moved the transformation (rotation) from the subpath to the resulting path. Now it looks good.

    Old:

       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)
    

    New:

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

    Look (new):

    enter image description here