CODEWITHSUNDEEP
swiftdrawinglayeruibezierpath
Adz
Adz

Reputation: 291

uibezierpath with multiple line width and a background image (swift)

I'm trying to draw several shapes (rectangle, triangle, circle, ...) in swift and for that, I use uibezierpath but I am not able to draw exactly what I want. I need to draw for example a rectangle, but the borders of this rectangle need to have different line width. To do that, I create different path then use the "appendpath" to merge them in one path. So that works, BUT I also need to have a background image in this rectangle. For that, I create a layer and set it an image. The issue is that, no background image are displayed when I use "appendpath", certainly because it doesn't recognize my drawing as a rectangle.

I hope it is clear enough, but is there a way to draw a shape with a background image, and have different border width ?

Thanks for your help !!

Upvotes: 1

Views: 1474

Answers (1)

Para
Para

Reputation: 3711

There are two solutions I'd suggest you try:

1) Masking

Create a normal CALayer and set the image as its contents. Then create a CAShapeLayer with the path you like and use it as the first layer's mask.

E.g.:

let imageLayer = CALayer()
imageLayer.contents = UIImage(named: "yourImage")?.CGImage // Your image here
imageLayer.frame = ... // Define a frame

let maskPath = UIBezierPath(...) // Create your path here
let maskLayer = CAShapeLayer()
maskLayer.path = maskPath.CGPath

imageLayer.mask = maskLayer

Don't forget to set the right frames and paths, and you should be able to achieve the effect you wanted.

2) Fill color

Create a CAShapeLayer with the path you like, then use your image as its fillColor.

E.g.:

let path = UIBezierPath(...) // Create your path here
let layer = CAShapeLayer()
layer.path = path.CGPath

let image = UIImage(named: "yourImage") // Your image here
layer.fillColor = UIColor(patternImage: image!).CGColor

You may find this approach easier at first, but controlling the way the image fills your shape is not trivial at all.

I hope this will help.
If you'd like more details, please provide an image or a sketch of what you're trying to achieve and / or the code you've written so far. Thanks!

Upvotes: 2

Related Questions