2.6 C
New York
Thursday, December 5, 2024

ios – SwiftUI: Form utilizing bezier curve can’t fill with gradient


Word the rect parameter of the Form.path(in:) technique. That is the rectangle by which you must draw your form.

However you ignored that parameter and simply drew a form in a 100×100 sq. within the prime left nook.

If you use the form within the root view, it would attempt to fill your complete display screen, passing your complete display screen’s rectangle (minus protected space insets) to path(in:). This rectangle can be what it makes use of to resolve the place the beginning level and finish level (or the centre level, in case of a radial gradient) of the gradient is.

In different phrases, if you say startPoint: .topLeading and endPoint: .bottomTrailing, meaning the gradient begins on the very prime left of the display screen, and ends on the very backside proper of the display screen. Because you did not draw something on the underside proper, the blue half isn’t seen in any respect.

Equally for the radial gradient, the centre level of the gradient is on the centre of the display screen, and your form covers a really small angle of the radial gradient, so that you solely see the clear half.

I think about what you might be after is one thing like this:

ClosedCurve(startPoint: startPoint,
                 endPoint: endPoint,
                 controlPoint: controlPoint)
.stroke(.purple, lineWidth: 2)
.fill(
    LinearGradient(
        gradient: Gradient(colours: [.red, .blue]),
        startPoint: .topLeading,
        endPoint: .heart
    )
)
.body(width: 100, top: 100)
// should you nonetheless need the form to be on the prime left of the display screen, do:
// .body(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)

Right here I’ve made the form fill a 100×100 sq. utilizing body. The gradient will use this 100×100 sq. to find out the place the beginning and finish factors are. I’ve additionally modified the top level to .heart (of the 100×100 sq.), as a result of I believe it seems to be higher that method

Right here is the consequence (the inexperienced border reveals the place the 100×100 sq. is):

enter image description here

That stated, if you’re writing a Form, you must take the rect parameter of path(in:) under consideration, and correctly draw a form that matches that rect. You almost certainly wants to alter your present design.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles