Loading

iOS Programming | UIBezierPath 绘制圆角超过 view 高度展示不全问题解决方案

一、问题描述

使用 UIBezierPath 一个高度为 12,宽度为 23 的图片左下角进行 8pt 的圆角切割。但是显示的效果跟 8pt 相差甚远,实际绘制出来的圆角大小是高度的一半。直接设置 view.layer 的圆角发现显示的效果是正确的。

下面的是我一开始实现的思路,当然我们项目实际是有对 view 封装对应的方法。

let imageView = UIImageView(frame: .init(x: 0, y: 0, width: 23, height: 12))
let bezierPath = UIBezierPath.init(roundedRect: imageView.bounds, byRoundingCorners: .bottomLeft, cornerRadii: .init(width: 8, height: 8))
let imageViewLayer = CAShapeLayer()
imageViewLayer.frame = imageView.bounds
imageViewLayer.path = bezierPath.cgPath
imageView.layer.mask = orangeViewLayer

有问题的效果图,我特意给黄色的 view 加了透明更清晰些

二、寻找原因

下面是 官方文档 给出的解释

cornerRadii
The radius of each corner oval. Values larger than half the rectangle’s width or height are clamped appropriately to half the width or height.

意思就是 view 的每个圆角半径如果超过宽度或者高度的一半,则会被限制为高度或者宽度的一半。

三、解决方案

那我们就需要换种思路去实现。我们 UIBezierPath 初始化方法中的 roundedRect 高度设置为我们想要圆角的两倍即可,这里的 roundedRect 就是定义路径基本形状的矩形。

let bezierPath = UIBezierPath.init(roundedRect: .init(x: 0, y: 0, width: 23, height: 16), byRoundingCorners: .bottomLeft, cornerRadii: .init(width: 8, height: 8))

但是我们显示还是不正确,因为定义的 roundedRect 高度超出了我们本身 view 大小。view 的左下角切割变成了另一种圆角还是不是我们想要的。
这样得到的效果图是:

我们可以把 roundedRecty 上移 4,也就是 -4。就是为了让 roundedRect 底部与 view 底部齐平。这样就能得到我们想要的 view 左下 8pt 的圆角了。当然如果你设置的是左上角或者右上角就不需要去移动 y 了。

修改后的 bezierPath 代码如下

let bezierPath = UIBezierPath.init(roundedRect: .init(x: 0, y: -4, width: 23, height: 16), byRoundingCorners: .bottomLeft, cornerRadii: .init(width: 8, height: 8))

解决后的效果图:

参考文档

  1. 《UIBezierPath》官方文档

  2. 《iOS | UIBezierPath 圆角展示不全的问题及解决方案》简书

posted @ 2021-06-06 23:40  QiuZH's  阅读(385)  评论(0编辑  收藏  举报