简体   繁体   English

当高度增加时,如何平滑地绕过进度栏的角?

[英]How to smoothly round the corners of a progress bar when the height is increased?

I am trying to make a progress bar like this: 我正在尝试制作这样的进度条:

在此处输入图片说明

I used this SO post to learn how to round corners: Link 我使用这篇SO帖子来学习如何转弯: 链接

Which works great when your progress bar height doesn't go past 6. When I make my progress bar bigger using: 当您的进度条高度不超过6时,这非常有用。当我使用以下方法将进度条变大时:

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

The result it: 结果呢: 在此处输入图片说明

It doesn't matter what the corner radius value is set to, it's not round. 角半径值设置为什么都无关紧要,不是圆的。 I am aware that making the corner radius value larger than the height can result in straight line corners but it doesn't matter what I set the corner radius to (I can set it to 1/2/4 and get similar results), the corners won't round. 我知道,使拐角半径值大于高度会导致直线拐角,但是将拐角半径设置为什么(我可以将其设置为1/2/4并获得类似结果)都没有关系。角落不会圆。

Here is my code: 这是我的代码:

 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

(Corner radius and the y value are the same because the y is multiplied by 2) (转角半径和y值相同,因为y乘以2)

I figured it out while writing this. 我在写这篇文章时弄清楚了。 You use corner radius like I have in the post above: 您可以像上一篇文章一样使用转角半径:

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

To increase the size you set a height constraint on the progress bar: 要增加大小,请在进度条上设置高度限制: 在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM