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

Posted 2023-02-24

【中文标题】如何在 Swift 中设置半圆 UIImage 像这个截图

【英文标题】：How to set half-round UIImage in Swift like this screenshot

【发布时间】：2017-04-04 17:53:24

【问题描述】：

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

你好所有的 Swifters，

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

或者有两个图像。一张以山脉为背景，另一张图片在白色背景中半圆并放在顶部？

请指教

【问题讨论】：

一种方法是制作一张普通的方形图片，其下方有透明像素，使其看起来像是被裁剪的，但事实并非如此:) 放入具有透明背景的 uiimageview 将产生与您相同的效果图片。您应该具备非常基本的 Photoshop 技能才能裁剪出下面的像素

您可能想检查如何使用 Core Graphics 绘制弧线。 this 可能是一个很好的说明点。

【参考方案1】：

使用UIBezier 路径绘制一个椭圆形。

绘制一个与 imageView 完全相同的矩形路径，其中包含您的图像。

用CGAffineTransform 变换椭圆路径，使其位于矩形路径的中心。

将带有CGAffineTransform 的矩形路径平移0.5 以在椭圆和矩形之间创建交集。

使用CAShapeLayer屏蔽图像。

附加：正如 Rob Mayoff 在 cmets 中所说，您可能需要在 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
    

结果：

【讨论】：

不要只发布代码。一个好的答案说明了问题和解决方案。

一两句话关于图层蒙版会很有帮助。此外，如果故事板中的视图与用户设备的大小不同，这看起来也不正确。您需要在viewDidLayoutSubviews 中计算掩码路径。

非常感谢@Oleh Zayats

【参考方案2】：

您可以在这里找到答案： https://***.com/a/34983655/5479510

但一般来说，我不建议使用白色图像叠加层，因为它在不同设备上可能会出现失真或像素化。使用掩码 UIView 会很好。

【参考方案3】：

为什么你不能只创建（绘制）圆形透明图像并在具有所需高度的视图顶部添加带有 UIImage() 的 UIImageView() 并在此视图下方添加其他视图。我这是最简单的方法。我会写评论，但我不能。