增加高度时如何平滑进度条的拐角？

Posted 2023-03-21

【中文标题】增加高度时如何平滑进度条的拐角？

【英文标题】：How to smoothly round the corners of a progress bar when the height is increased?

【发布时间】：2018-01-26 18:08:38

【问题描述】：

我正在尝试制作这样的进度条：

我使用这个 SO 帖子来学习如何圆角：Link

当您的进度条高度不超过 6 时效果很好。当我使用以下方法使进度条变大时：

        progressBar.transform = progressBar.transform.scaledBy(x: 1, y: 8)

结果吧：

圆角半径值设置为多少无关紧要，它不是圆的。我知道使拐角半径值大于高度可能会导致直线拐角，但我将拐角半径设置为什么并不重要（我可以将其设置为 1/2/4 并获得类似的结果），角落不会圆。

这是我的代码：

 progressBar.transform = progressBar.transform.scaledBy(x: 1, y: 8)
 progressBar.layer.cornerRadius = 8
 progressBar.clipsToBounds = true
 progressBar.layer.sublayers![1].cornerRadius = 8
 progressBar.subviews[1].clipsToBounds = true

（圆角半径和y值相同，因为y乘以2）

【参考方案1】：

我在写这篇文章时想通了。你像我在上面的帖子中那样使用圆角半径：

progressBar.layer.cornerRadius = 8
progressBar.clipsToBounds = true
progressBar.layer.sublayers![1].cornerRadius = 8
progressBar.subviews[1].clipsToBounds = true

要增加大小，您可以在进度条上设置高度限制：