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

I've posted another answer, please check – Amit Singh Jul 08 '16 at 14:21 — Amit Singh, Jul 08 '16 at 14:21

Amit Singh · Accepted Answer · 2016-07-08T07:42:14.083

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

edited Jul 08 '16 at 07:42

answered Jul 08 '16 at 07:25

Amit Singh

2,698
21
49

can u tell me the exact width and height for uiimageview – pavan kumar naidu Jul 08 '16 at 07:26
Updating the answer wait – Amit Singh Jul 08 '16 at 07:29
thank you for responding waiting for your positive feedback – pavan kumar naidu Jul 08 '16 at 07:30
Let me if it helped – Amit Singh Jul 08 '16 at 07:44
there is lot of difference for your output and my reqierment – pavan kumar naidu Jul 08 '16 at 13:24
Means, what's the difference? Also if image is looking bigger is because of content mode. What's ur requirements – Amit Singh Jul 08 '16 at 13:34
i need exact like above image – pavan kumar naidu Jul 08 '16 at 13:52
but i am not exact output what i need – pavan kumar naidu Jul 08 '16 at 13:53
Yeah, wait a minute – Amit Singh Jul 08 '16 at 14:01

score 0 · Answer 2 · edited May 23 '17 at 11:44

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

Great, please accept the solution, and help others also to find the solution — Amit Singh, Jul 09 '16 at 11:17
:) , I'll try to answer that question, it may take time to achieve that. You first accept this question :) — Amit Singh, Jul 09 '16 at 12:17
No, you need to accept this as correct answer, you need to tick below the up arrow — Amit Singh, Jul 09 '16 at 12:19
Hey bro, You have accept the wrong one, this one is correct answer — Amit Singh, Jul 09 '16 at 12:20
yeah but when i applied uiview frame through coding i got it — pavan kumar naidu, Jul 09 '16 at 12:22
Ok, thanks, checking your second question. Will get back to you soon — Amit Singh, Jul 09 '16 at 12:22

How to display image in Diamond shape in iOS?

2 Answers2