.trim() Shape SwiftUI

Question

Jad-T OP

Created Apr ’21

Replies 7

Boosts 0

Views 2k

Participants 3

Hello
I have a Raindrop shape:

Code Block struct Raindrop: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x: rect.size.width / 2, y: 0))
            path.addQuadCurve(to: CGPoint(x: rect.size.width / 2, y: rect.size.height), control: CGPoint(x: rect.size.width, y: rect.size.height))
            path.addQuadCurve(to: CGPoint(x: rect.size.width / 2, y: 0), control: CGPoint(x: 0, y: rect.size.height))
        }
    }
}

When I trim it in the ContentView, it trims from right to left, is there a way to trim it from top to bottom?

Code Block  Raindrop()
   .trim(from: 0.9, to: 1)
   .scaledToFit()

Thank you

Answered by OOPer in 671114022

I want to trim it 50% but from top to bottom, so I want it trimmed from the center to the top.

Thanks for your reply. In fact, I expected some more info about all the views in your app, if there is any other views overlapping to your shape or how your shape is arranged in your app, etc... Sorry, my words are not enough.

So, assuming the simplest case, you may use clipShape.

Define your clipping rect, for example:

Code Block struct RectBand: Shape {
    var from: CGFloat
    var to: CGFloat
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.addRect(CGRect(
                x: rect.origin.x,
                y: rect.origin.y + from * rect.size.height,
                width: rect.size.width,
                height: (to-from) * rect.size.height
            ))
        }
    }
}

And use it with clipShape like this:

Code Block             Raindrop()
                .clipShape(RectBand(from: 0.4, to: 0.9))
                .scaledToFit()

Of course you may need to adjust the values from and to.

Boost

Answer 1

OOPer OP

Apr ’21

it trims from right to left,

It is not the right description of trim(from:to:). It trims from the start of the path to the end of the path.

With your Raindrop, this code:

Code Block         Raindrop()
            .trim(from: 0.4, to: 0.6)
            .scaledToFit()

would show you the lower portion of the path.

If you want to cut arbitrary shape with some band from top to bottom, you may need something other than trim(from:to:).

0

Answer 2

Jad-T OP

Apr ’21

It is not the right description of trim(from:to:).

Ok, thanks for the correction

you may need something other than trim(from:to:).

What would you use or how would you do it?

0

Answer 3

OOPer OP

Apr ’21

What would you use or how would you do it?

That depends on how you want to use the trimmed shape. Can you describe how you want to use it more specifically?

0

Answer 4

Claude31 OP

Apr ’21

To draw an arc, you could try to use

func addArc(center: CGPoint, radius: CGFloat, startAngle: Angle, endAngle: Angle, clockwise: Bool, transform: CGAffineTransform)

0

Answer 5

Jad-T OP

Apr ’21

Can you describe how you want to use it more specifically?

I want to trim it 50% from top to bottom not from right to left, at the end I want it trimmed from the center to the top.

0

Answer 6

OOPer OP

Apr ’21

Accepted Answer

I want to trim it 50% but from top to bottom, so I want it trimmed from the center to the top.

Thanks for your reply. In fact, I expected some more info about all the views in your app, if there is any other views overlapping to your shape or how your shape is arranged in your app, etc... Sorry, my words are not enough.

So, assuming the simplest case, you may use clipShape.

Define your clipping rect, for example:

Code Block struct RectBand: Shape {
    var from: CGFloat
    var to: CGFloat
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.addRect(CGRect(
                x: rect.origin.x,
                y: rect.origin.y + from * rect.size.height,
                width: rect.size.width,
                height: (to-from) * rect.size.height
            ))
        }
    }
}

And use it with clipShape like this:

Code Block             Raindrop()
                .clipShape(RectBand(from: 0.4, to: 0.9))
                .scaledToFit()

Of course you may need to adjust the values from and to.

1

Answer 7

Jad-T OP

Apr ’21

That is what I wanted, thank you

0