Swift：在标签周围画一个圆圈答案

【问题标题】：Swift: Draw a Circle around a LabelSwift：在标签周围画一个圆圈
【发布时间】：2015-09-22 16:39:56
【问题描述】：

我试图在运行时在 TableViewCell 的单元格中围绕标签画一个圆圈。

我可以弄清楚如何将它大致围绕标签，但我在将它完全围绕标签居中时遇到了一些麻烦。

圆圈似乎是在标签的右侧和中间绘制。

到目前为止，这是我的代码，我相信这对某人来说很容易。

func drawCircle() {
    let x = countLabel.layer.position.x - (countLabel.frame.width)
    let y = countLabel.layer.position.y - (countLabel.frame.height / 2)
    let circlePath = UIBezierPath(roundedRect: CGRectMake(x, y, countLabel.frame.height, countLabel.frame.height), cornerRadius: countLabel.frame.height / 2).CGPath

    let circleShape = CAShapeLayer()
    circleShape.path = circlePath
    circleShape.lineWidth = 3
    circleShape.strokeColor = UIColor.whiteColor().CGColor
    circleShape.fillColor = UIColor.clearColor().CGColor

    self.layer.addSublayer(circleShape)
}

【问题讨论】：

如果你想要动画绘图，你可以使用this answer
如果你想要动画绘图，你可以使用this answer

标签： ios swift drawing calayer

【解决方案1】：

您可以改为在标签图层上使用圆角半径。您将标签设为正方形，然后将其图层的角半径设置为标签宽度/高度的一半，这将使其完美圆润。您将边框宽度设置为大于零的值，并将边框颜色设置为您要使用的描边颜色。

let size:CGFloat = 35.0 // 35.0 chosen arbitrarily

countLabel.bounds = CGRectMake(0.0, 0.0, size, size) 
countLabel.layer.cornerRadius = size / 2
countLabel.layer.borderWidth = 3.0
countLabel.layer.backgroundColor = UIColor.clearColor().CGColor
countLabel.layer.borderColor = UIColor.greenColor().CGColor

它看起来像这样：

虽然完整的代码在单个视图控制器 iPad 模板项目中是这样的：

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let size:CGFloat = 35.0 // 35.0 chosen arbitrarily

        let countLabel = UILabel()
        countLabel.text = "5"
        countLabel.textColor = .greenColor()
        countLabel.textAlignment = .Center
        countLabel.font = UIFont.systemFontOfSize(14.0)
        countLabel.bounds = CGRectMake(0.0, 0.0, size, size)
        countLabel.layer.cornerRadius = size / 2
        countLabel.layer.borderWidth = 3.0
        countLabel.layer.backgroundColor = UIColor.clearColor().CGColor
        countLabel.layer.borderColor = UIColor.greenColor().CGColor

        countLabel.center = CGPointMake(200.0, 200.0)

        self.view.addSubview(countLabel)
    }

}

【讨论】：

【解决方案2】：

countLabel.layer.cornerRadius = 0.5 * countLabel.bounds.size.width

【讨论】：

【解决方案3】：

呃，这就是我的想法，愚蠢的错误。

在处理 BezierPath 时，X 和 Y 是从中间而不是从左上角计算的。

所以x和y的代码应该如下：

let x = countLabel.layer.position.x - (countLabel.frame.height / 2)
let y = countLabel.layer.position.y - (countLabel.frame.height / 2)

【讨论】：

【解决方案4】：

试试这个：

func drawCircle() {
    var padding : CGFloat = 8

    let x = countLabel.layer.position.x - (countLabel.frame.width / 2)
    let y = countLabel.layer.position.y  - (countLabel.frame.width / 2)
    let circlePath = UIBezierPath(roundedRect: CGRectMake(x - padding, y - padding, countLabel.frame.width + (2 * padding), countLabel.frame.width + (2 * padding)), cornerRadius: (countLabel.frame.width + (2 * padding)) / 2).CGPath

    let circleShape = CAShapeLayer()
    circleShape.path = circlePath
    circleShape.lineWidth = 3
    circleShape.strokeColor = UIColor.greenColor().CGColor
    circleShape.fillColor = UIColor.clearColor().CGColor

    self.view.layer.addSublayer(circleShape)
}

修改填充变量以调整标签和圆圈之间的填充。干杯！

【讨论】：