如何在这个截图中设置Swift中的半圆UIImage

Question

https://www.dropbox.com/s/wlizis5zybsvnfz/File%202017-04-04%2C%201%2052%2024%20PM.jpeg?dl=0

你好所有的Swifters,

谁能告诉我如何设置这种UI？他们设置了半圆形图像吗？

或者有两个图像.一个背景中的山脉和anohter图像在白色背景下半圆形并放在上面？

请指教

Answer 1

1. 使用UIBezier路径绘制椭圆形状.

2. 绘制一个与imageView完全相似的矩形路径来保存图像.

3. 使用CGAffineTransform变换椭圆路径,使其位于rect路径的中心.

4. 使用CGAffineTransform将rect路径转换为0.5,以创建椭圆和矩形之间的交集.

5. 使用CAShapeLayer屏蔽图像.

附加:正如Rob Mayoff在评论中所述,您可能需要计算掩模尺寸viewDidLayoutSubviews.不要忘记玩它,测试不同的情况(不同的屏幕尺寸,方向)并根据您的需要调整实施.

请尝试以下代码:

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        guard let image = imageView.image else {
            return
        }

        let size = image.size

        imageView.clipsToBounds = true
        imageView.image = image

        let curveRadius    = size.width * 0.010 // Adjust curve of the image view here
        let invertedRadius = 1.0 / curveRadius

        let rect = CGRect(x: 0,
                          y: -40,
                      width: imageView.bounds.width + size.width * 2 * invertedRadius,
                     height: imageView.bounds.height)

        let ellipsePath = UIBezierPath(ovalIn: rect)
        let transform = CGAffineTransform(translationX: -size.width * invertedRadius, y: 0)
        ellipsePath.apply(transform)

        let rectanglePath = UIBezierPath(rect: imageView.bounds)
        rectanglePath.apply(CGAffineTransform(translationX: 0, y: -size.height * 0.5))
        ellipsePath.append(rectanglePath)

        let maskShapeLayer   = CAShapeLayer()
        maskShapeLayer.frame = imageView.bounds
        maskShapeLayer.path  = ellipsePath.cgPath
        imageView.layer.mask = maskShapeLayer
    }
}

结果: