【问题标题】:How to set half-round UIImage in Swift like this screenshot如何在 Swift 中设置半圆 UIImage 像这个截图
【发布时间】: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 可能是一个很好的说明点。

标签: ios swift


【解决方案1】:
  1. 使用UIBezier 路径绘制一个椭圆形。

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

  3. CGAffineTransform 变换椭圆路径,使其位于矩形路径的中心。

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

  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://stackoverflow.com/a/34983655/5479510

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

【讨论】:

    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 2021-05-28
      • 1970-01-01
      • 2019-06-07
      • 1970-01-01
      • 2016-12-03
      • 2012-06-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多