How to display image in Diamond shape in iOS?

Question

Original image is like this Hai i am new to iOS my requirement is display images in diamond shape so for that purpose i followed the following code. I took a UIView and ImageView is subview to that UIView. i am getting diamond shape but image is flipping . how to solve that issue?

  var tr: CGAffineTransform = CGAffineTransformIdentity
  tr = CGAffineTransformScale(tr, 0.8, 1)
  tr = CGAffineTransformRotate(tr, 0.7)
  self.views.transform =  tr

Answer 1

As you have provided the image, after analysing I can conclude that you need to do is

• Add diagonal mask to the ImageView
• Rotate image inside that imageView to some angle

assuming that the image is rotated to 45 degrees, I'm providing the solution as

import UIKit

extension UIView
{
func addDiamondMaskToView()
{
    let path = UIBezierPath()
    path.moveToPoint(CGPoint(x: self.bounds.size.width / 2.0, y: 0))
    path.addLineToPoint(CGPoint(x: self.bounds.size.width, y: self.bounds.size.height / 2.0))
    path.addLineToPoint(CGPoint(x: self.bounds.size.width / 2.0, y: self.bounds.size.height))
    path.addLineToPoint(CGPoint(x: 0, y: self.bounds.size.height / 2.0))
    path.closePath()

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.CGPath
    shapeLayer.fillColor = UIColor.whiteColor().CGColor
    shapeLayer.strokeColor = UIColor.clearColor().CGColor
    self.layer.mask = shapeLayer
}
}

extension UIImageView
{
    func addDiamondWithSomeAngle(angleInDegrees degrees : CGFloat)
    {
        self.addDiamondMaskToView()
        self.image = self.image?.imageRotatedByDegrees(degrees, flip: false)
    }
}

extension UIImage {
    public func imageRotatedByDegrees(degrees: CGFloat, flip: Bool) -> UIImage 
    {
        let degreesToRadians: (CGFloat) -> CGFloat = {
            return $0 / 180.0 * CGFloat(M_PI)
        }
        let rotatedViewBox = UIView(frame: CGRect(origin: CGPointZero, size: size))
        let t = CGAffineTransformMakeRotation(degreesToRadians(degrees));
        rotatedViewBox.transform = t
        let rotatedSize = rotatedViewBox.frame.size

        UIGraphicsBeginImageContext(rotatedSize)
        let bitmap = UIGraphicsGetCurrentContext()

        CGContextTranslateCTM(bitmap, rotatedSize.width / 2.0, rotatedSize.height / 2.0);

        CGContextRotateCTM(bitmap, degreesToRadians(degrees));

        var yFlip: CGFloat

        if(flip){
            yFlip = CGFloat(-1.0)
        } else {
            yFlip = CGFloat(1.0)
        }

        CGContextScaleCTM(bitmap, yFlip, -1.0)
        CGContextDrawImage(bitmap, CGRectMake(-size.width / 2, -size.height / 2, size.width, size.height), CGImage)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage
    }
}

You need to call the method as

imageView.addDiamondWithSomeAngle(angleInDegrees: 45)

Output is as follows

Courtesy : Image rotation by confile

Answer 2

You can use UIBezierPath to draw shapes

import UIKit

extension UIView
{
    func addDiamondMaskToView()
    {
    let path = UIBezierPath()
    path.moveToPoint(CGPoint(x: self.bounds.size.width / 2.0, y: 0))
    path.addLineToPoint(CGPoint(x: self.bounds.size.width, y: self.bounds.size.height / 2.0))
    path.addLineToPoint(CGPoint(x: self.bounds.size.width / 2.0, y: self.bounds.size.height))
    path.addLineToPoint(CGPoint(x: 0, y: self.bounds.size.height / 2.0))
    path.closePath()

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.CGPath
    shapeLayer.fillColor = UIColor.whiteColor().CGColor
    shapeLayer.strokeColor = UIColor.clearColor().CGColor

    self.layer.mask = shapeLayer
    }
}

You can call the method as

//suppose this is your imageview
let imgView = UIImageView(frame: CGRectMake(0, 0, 100, 200))
//then call the method as
imgView.addDiamondMaskToView()

Its working fine for me, check the images for reference