Question

我必须在UIView中创建如下图所示的形状。但是我不知道如何绘制这种形状。我试图使用带有CAShapeLayer的UIBezierPath路径成功绘制此形状，但圆线绘制成功，但是我无法绘制圆点和圆形填充颜色。谁能建议我如何使用任何库或UIBezierPath实现这种形状。

这是我正在尝试绘制此圆形的代码。

class ViewController: UIViewController {


var firstButton = UIButton()
var mylabel = UILabel()

override func viewDidLoad() {
    super.viewDidLoad()

    self.creatingLayerWithInformation()

}

func creatingLayerWithInformation(){
    let safeAreaHeight = self.view.safeAreaInsets.top
    let navBarHeight = self.navigationController?.navigationBar.frame.height

    self.addLayer(isClockWise: true, radius: self.view.frame.width * 0.72, xPoint: 0, yPoint: navBarHeight!, layerColor: UIColor.green, fillcolor: .clear)
    self.addLayer(isClockWise: true, radius: self.view.frame.width * 0.72, xPoint: self.view.frame.width, yPoint:  self.view.frame.height - 150, layerColor: UIColor.blue, fillcolor: .clear)

    let aa = self.view.frame.width * 0.72

    self.addLayer(isClockWise: true, radius: 10, xPoint: 0+aa, yPoint: navBarHeight!+5, layerColor: UIColor.blue, fillcolor: .clear)

    self.addLayer(isClockWise: true, radius: 10, xPoint: 0+15, yPoint: navBarHeight!+aa, layerColor: UIColor.blue, fillcolor: .clear)

}

func addLayer(isClockWise: Bool, radius: CGFloat, xPoint: CGFloat, yPoint: CGFloat, layerColor: UIColor, fillcolor: UIColor) {

    let pi = CGFloat(Float.pi)
    let start:CGFloat = 0.0
    let end :CGFloat = 20

    // circlecurve
    let path: UIBezierPath = UIBezierPath();
    path.addArc(
        withCenter: CGPoint(x:xPoint, y:yPoint),
        radius: (radius),
        startAngle: start,
        endAngle: end,
        clockwise: isClockWise
    )
    let layer = CAShapeLayer()
    layer.lineWidth = 3
    layer.fillColor = fillcolor.cgColor
    layer.strokeColor = layerColor.cgColor
    layer.path = path.cgPath
    self.view.layer.addSublayer(layer)
}}

但是我得到以下结果。

请建议我如何实现这种形状。如果我做错了什么，请纠正我。如果有任何图书馆，也请提出建议。请给我一些解决方案。

感谢大家。

Answer 1

有多种方法可以实现此效果，但是一个简单的解决方案是不要将大圆画成单个弧，而要画成一系列在小圆的边缘开始和停止的弧。为此，您需要知道与内圆的偏移量。做一些三角函数，可以将其计算为：

let angleOffset = asin(innerRadius / 2 / mainRadius) * 2

因此：

let path = UIBezierPath()
path.move(to: point(from: arcCenter, radius: mainRadius, angle: startAngle))

let anglePerChoice = (endAngle - startAngle) / CGFloat(choices.count)
let angleOffset = asin(innerRadius / 2 / mainRadius) * 2
var from = startAngle
for index in 0 ..< choices.count {
    var to = from + anglePerChoice / 2 - angleOffset
    path.addArc(withCenter: arcCenter, radius: mainRadius, startAngle: from, endAngle: to, clockwise: true)
    to = from + anglePerChoice
    from += anglePerChoice / 2 + angleOffset
    path.move(to: point(from: arcCenter, radius: mainRadius, angle: from))
    path.addArc(withCenter: arcCenter, radius: mainRadius, startAngle: from, endAngle: to, clockwise: true)

    from = to
}

let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = strokeColor.cgColor
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.lineWidth = lineWidth
layer.addSublayer(shapeLayer)

位置：

func point(from point: CGPoint, radius: CGFloat, angle: CGFloat) -> CGPoint {
    return CGPoint(x: point.x + radius * cos(angle),
                   y: point.y + radius * sin(angle))
}

结果是：

因此，当您添加内圆时：

尽管上述操作很简单，但仍有局限性。具体来说，如果大圆弧的lineWidth与小圆弧的宽度相比确实很宽，则单独的大圆弧的折线将无法与小圆弧的边缘很好地对齐。例如。想象一下，小圆圈的半径为22点，但是大弧的笔触相对较宽，例如36分。

如果有这种情况（不是您的情况，而是为了将来的读者使用），如暗淡所建议的那样，另一种方法是将大弧线绘制为单个笔触，然后使用用于小圆圈。

所以，假设您有：

一个单独的CAShapeLayer，称为mainArcLayer，代表大弧；和
所有小圆圈的UIBezierPath数组，称为smallCirclePaths。

然后可以在layoutSubviews子类的UIView（或viewDidLayoutSubviews子类的UIViewController）中创建掩码，如下所示：

override func layoutSubviews() {
    super.layoutSubviews()

    let path = UIBezierPath(rect: bounds)
    smallCirclePaths.forEach { path.append($0) }

    let mask = CAShapeLayer()
    mask.fillColor = UIColor.white.cgColor
    mask.strokeColor = UIColor.clear.cgColor
    mask.lineWidth = 0
    mask.path = path.cgPath
    mask.fillRule = .evenOdd

    mainArcLayer.mask = mask
}

结果是：

这是解决该问题的通用方法。

Answer 2

以最简单的方式考虑问题。想象一条直线，中间有一个小圆圈。

让我们将思维分为三层：

需要显示的背景
保持直线的层
包含小圆圈的层

计算小圆圈层相对于直线层的位置。

将小圆圈层放置在该位置。好的，但是直线会显示出来。

返回直线层。给它一个掩码。在小圆圈层的确切位置用透明圆圈构造该蒙版。

现在，遮罩会沿直线“打一个洞” —恰好在圆圈所覆盖的位置。因此，我们似乎可以从圆环中看到背景，因为直线恰好在那个位置丢失了。

在现实生活中，将有多个圆层，并且蒙版将有多个透明圆，而直线将是一条曲线，但是一旦您完成了打孔操作，这将是一个小问题。

如何在iOS Swift4中创建此圆形？

2 个答案: