iOS-圆角与阴影（诡异的UIImage）

在日常开发中，给控件加阴影或者圆角是常遇到的事。偶尔还会阴影与圆角并存，这篇文章仅记录我在开发中遇到的问题。

let button = UIButton(frame: CGRect(x: 100, y: 100, width: 100, height: 50))
        //在这里给button加上title也是可以的，圆角不会对title造成任何影响
        button.setTitle("button", for: .normal)
        button.layer.cornerRadius = 25
        view.addSubview(button)

下面是效果图

button只有圆角

如果是给button设置一张图片的话,而且这张图片比较大

//注释掉设置title的那句代码加上下面这句
button.setImage(UIImage(named: "1"), for: .normal)

button只有圆角，设置了image

奇迹发生了圆角没了！！！
然后加上下面这句代码:

button.layer.masksToBounds = true

你的圆角又回来了。

嗯，圆角回来了

如果这时候你要设置阴影的话加上下面这几句代码

        button.layer.shadowColor = UIColor.black.cgColor
        /*
         ios设备原点在屏幕左上方,向右为x轴正方向且越来越大。 向下为y轴正方向且越来越大，
         默认值是(0,-3), width大于0时，阴影沿着x轴正方向移动，height 大于0时， 阴影沿着y轴的正方向移动
         */
        button.layer.shadowOffset = CGSize(width: 0, height: 10)
        //shadowOpacity初始值为0，意思是阴影的不透明度，不设置的话阴影不会显示
        button.layer.shadowOpacity = 0.4

？？我的阴影去哪了？

阴影去那了？

罪魁祸首就是这句代码：

//把这句注释了
//button.layer.masksToBounds = true

嗯，阴影有了，圆角去那了？

阴影有了圆角去那了？

masksToBounds大概意思就是给控件的layer添加了一个蒙版层，这个属性默认为false。
如果为true的话，系统会默认给layer的mask属性设置一个值。最重要的一点，如果设置
圆角的话，蒙版层会沿着圆角，而不是layer.bounds所指的那个矩形。
maskToBounds设置为true,和你给layer.mask一个值的效果是一样的。
所以当你设置maskToBounds后阴影看不到了。

扯了半天终于要到今天的主题了，诡异的UIImage。

那我如果是个UIImageView呢，我既想有圆角又想有阴影怎么办。
有一种偷懒的办法，就是给UIImageView下面放一个UIView再给这个UIView设置阴影，但是这样做的话你要根据圆角的大小去设置UIView的大小，在算它的位置，在设置阴影。如果一个页面上有多个这样的UIImageView的话那会很操蛋。下面介绍一种新的做法。

在介绍这种新做法之前我们来看看为什么给UIImageView设置了圆角，但是没有“效果”。
其实给UIImageView设置image时应该是将这个image画到这个UIImageView上的，而画布的大小就是UIImageView的bounds大小，而不是设置圆角后的那个形状。而且设置圆角只是给UIImageView的layer设置，并不会影响到UIImageView的大小，所以当给UIImageView设置了圆角，而UIImageView显示时并不会去裁剪图片。如果设置了maskToBounds为true时，图片是剪裁掉了，但是阴影不会显示了。

下面给出一组同在maskToBounds是默认值，且设置了圆角及阴影。一个没有设置image和一个设置了image的UIImageView的对比：

左无image,右有image

如果想UIImageView同时有阴影和圆角的话，只能是对UIImage进行剪裁，效果如下:

UIImageView同时带有阴影和圆角

看好了，没有骗人，不是用那种UIImageView下面再加一个UIView给这个UIView设置阴影:

说好的不骗人

剪裁的代码如下

extension UIImage {
    //这里我对UIImage做了个扩展
    func cornerImage(size: CGSize) -> UIImage? {
        let images = self
        print("images = \(images)")
        UIGraphicsBeginImageContext(size)
        guard let gc = UIGraphicsGetCurrentContext() else {  return nil }
        let radius = size.width / 2
        gc.concatenate(gc.ctm)
        gc.addArc(center: CGPoint(x: radius, y: radius), radius: radius, startAngle: 1.5 *  3.14, endAngle:  1.5 * -3.14, clockwise: true)
        gc.closePath()
        gc.clip()
        gc.draw(self.cgImage!, in: CGRect(origin: CGPoint(x: 0, y: 0), size: size))
        
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}
上面代码的功能就是，我要设置圆角，而且设置完这个圆角后UIImageView刚好是个圆，创建了一个圆形的画布，将image重新画到这个圆形的画布中。
重新得到的image的形状就和UIImageView的layer的形状是一致的，如果你需要的仅仅是四个角带一点点的圆的话，可以用贝塞尔曲线重新画一个画布。

下面是效果图：

怎么样？蒙逼了吧？

蒙逼了吧！？image的方向不对！！逆时针选转了90度。

好吧我不装了，下面给出解决的代码，这个是看别人的代码，我翻译成了Swift的

extension UIImage {
    func fixOrientation() -> UIImage? {
        print("-----> \(#function)")
        if self.imageOrientation == .up {
            return self
        }
        
        var transform = CGAffineTransform.identity
        
        switch self.imageOrientation {
        case .down, .downMirrored:
            transform = transform.translatedBy(x: self.size.width, y: self.size.height)
            transform = transform.rotated(by: CGFloat(M_PI))
        case .left, .leftMirrored:
            transform = transform.translatedBy(x: self.size.width, y: 0)
            transform = transform.rotated(by: CGFloat(M_PI_2))
        case .right, .rightMirrored:
            transform = transform.translatedBy(x: 0, y: self.size.height)
            transform = transform.rotated(by: -CGFloat(M_PI_2))
        default:
            print("1 is normal")
        }
        
        switch self.imageOrientation {
        case .upMirrored, .downMirrored:
            transform = transform.translatedBy(x: self.size.width, y: 0)
            transform = transform.scaledBy(x: -1, y: 1)
        case .leftMirrored, .rightMirrored:
            transform = transform.translatedBy(x: self.size.height, y: 0)
            transform = transform.scaledBy(x: -1, y: 1)
        default:
            print("2 is normal")
        }
        
        guard let cgImage = self.cgImage else { return nil }
        
        guard let ctx = CGContext.init(data: nil, width: Int(self.size.width), height: Int(self.size.height),
                                 bitsPerComponent: cgImage.bitsPerComponent, bytesPerRow: 0,
                                 space: cgImage.colorSpace!, bitmapInfo: cgImage.bitmapInfo.rawValue) else { return nil }
        
        ctx.concatenate(transform)
        switch self.imageOrientation {
        case .left, .leftMirrored, .right, .rightMirrored:
            ctx.draw(cgImage, in: CGRect(x: 0, y: 0, width: self.size.height, height: self.size.width))
        default:
            ctx.draw(cgImage, in: CGRect(origin: CGPoint.zero, size: self.size))
        }
        
        guard let cgImg = ctx.makeImage() else { return nil }
        let img = UIImage(cgImage: cgImg)
        return img
    }
}

下面给出上述代码的出处地址，出处中有为什么这样做的原因。

源码出处
个人猜测UIImageView已经对其进行了转换。
调用时

        let imageView = UIImageView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        let image = UIImage(named: "1")?.fixOrientation()
        imageView.image = image?.cornerImage(size: imageView.bounds.size)
        imageView.backgroundColor = UIColor.cyan
        imageView.layer.cornerRadius = 50
        imageView.layer.shadowColor = UIColor.black.cgColor
        imageView.layer.shadowOffset = CGSize(width: 0, height: 10)
        imageView.layer.shadowOpacity = 0.6

就能看到正确的效果。
UIButton的做法一样。如果button不需要设置图片，只有title而且圆角与阴影并存，只需要设置圆角和阴影就行了。千万记住别设置maskToBounds。