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
的左下角切割变成了另一种圆角还是不是我们想要的。
这样得到的效果图是:
我们可以把 roundedRect
的 y
上移 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))
解决后的效果图: