Param
Param

Reputation: 39

Xcode save image to a particular shape

In Swift or Objective-C does anyone know how to let the user take a picture (either from album or camera) and save it to a specific design. For example, I have seen how Instagram allows a user to set their profile picture and it appears as a circle. How does one save it to a circle, I am trying to use a triangle, any suggestions?

Upvotes: 1

Views: 493

Answers (3)

Oliver Atkinson
Oliver Atkinson

Reputation: 8029

You want to mask the image view with a shape, use a CAShapeLayer and then apply a mask to the layer.

I will use a triangle as per your original request.

let imageView = UIImageView(image: UIImage(named: "picture.jpg"))

let path = UIBezierPath()

path.moveToPoint(CGPoint(x: CGRectGetWidth(imageView.bounds) / 2, y: 0))
path.addLineToPoint(CGPoint(x: CGRectGetWidth(imageView.bounds), y: CGRectGetHeight(imageView.bounds)))
path.addLineToPoint(CGPoint(x: 0, y: CGRectGetHeight(imageView.bounds)))

path.closePath()

let shapeLayer = CAShapeLayer()
shapeLayer.path = path.CGPath

imageView.layer.mask = shapeLayer

Which gives us something like this:

Upvotes: 1

Tom el Safadi
Tom el Safadi

Reputation: 6786

If you want to achieve a circle you can give it a corner radius.

Try this:

    yourImage.layer.cornerRadius = imgView.frame.width / 2
    yourImage.clipsToBounds = true

Check out this tutorial for different shapes. You can create your own shapes and apply them on your photos.

http://www.raywenderlich.com/90488/calayer-in-ios-with-swift-10-examples

Upvotes: 0

D. Greg
D. Greg

Reputation: 1000

The circle is done by adding a corner radius equal to half the UIImageView size.

func circleView(imgView: UIImageView) {
    imgView.layer.cornerRadius = imgView.frame.width / 2
    imgView.clipsToBounds = true
}

That won't work for the triangle though. You could make a layer mask in that shape and apply it to the view. Try and search for applying a layer mask to a UIView.

Upvotes: 0

Related Questions