如何在 iOS 中以菱形显示图像？

Question

Original image is like this Hai 我是 iOS 新手，我的要求是以菱形显示图像，因此为此我遵循以下代码。我拿了一个 UIView 和 ImageView 是那个 UIView 的子视图。我得到钻石形状，但图像正在翻转。如何解决这个问题？

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

Answer 1

正如你提供的图片，经过分析我可以得出结论，你需要做的是

• 向 ImageView 添加对角线蒙版
• 将该 imageView 内的图像旋转到某个角度

假设图像旋转到 45 度，我提供的解决方案为

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
    }
}

你需要调用方法

imageView.addDiamondWithSomeAngle(angleInDegrees: 45)

输出如下

礼貌：Image rotationconfile

Answer 2

你可以使用UIBezierPath来绘制形状

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
    }
}

您可以将方法称为

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

它对我来说工作正常，请查看图片以供参考