坚持使用虚线创建圆形视图但具有多种颜色

Question

我想在我的应用程序中创建这种设计（已添加图片）。我已尝试使用复制器层创建它，但如何管理此图案中的不同颜色？

    let replicatorLayer = CAReplicatorLayer()
    replicatorLayer.frame.size = viewForReplicatorLayer.frame.size
    replicatorLayer.masksToBounds = true
    replicatorLayer.instanceColor = UIColor.red.cgColor
    
    let radius = viewForReplicatorLayer.frame.size.width/2 - 30
    let circum = 2 * CGFloat.pi * radius
    let num = circum/10 + 21
    let instanceCount = num//100//viewForReplicatorLayer.frame.width / image!.size.width
    replicatorLayer.instanceCount = Int(instanceCount)//Int(ceil(instanceCount))
    replicatorLayer.instanceDelay = 1.0
    viewForReplicatorLayer.layer.addSublayer(replicatorLayer)
        
    let layer = CALayer()
    let x = viewForReplicatorLayer.bounds.midX
    layer.frame = CGRect(x: x, y: 0, width: 3, height: 10)
    layer.backgroundColor = UIColor.red.cgColor
    replicatorLayer.addSublayer(layer)
    let angle = Float.pi * 2 / Float(instanceCount)
    replicatorLayer.instanceTransform = CATransform3DMakeRotation(CGFloat(angle), 0, 0, 1)

这就是我想要做的：

Answer 1

您从 RGB (1; 0.5; 0) 的橙色开始，然后上升到 RGB (1; 0; 1) 的紫色。

R: 1   -> 1
G: 0.5 -> 0
B: 0   -> 1

所以，我们只需要复制它：

replicatorLayer.instanceBlueOffset = 1 / Float(instanceCount)
replicatorLayer.instanceGreenOffset = -(1.0 / Float(instanceCount * 2)) //There is the 2 factor because because this color speed is twice less the blue one

其他一些变化：

replicatorLayer.instanceColor = UIColor(red: 1, green: 0.5, blue: 0, alpha: 1).cgColor
...
layer.backgroundColor = UIColor.white.cgColor

Answer 2

我会用你想要的颜色创建一个圆锥渐变层，然后使用复制器层来遮盖这个渐变层。

创建具有所需颜色的渐变层：

let orangeColor = UIColor(red: 236.0 / 255.0, green: 184.0 / 255.0, blue: 63.0 / 255.0, alpha: 1.0)
let purpleColor = UIColor(red: 172.0 / 255.0, green: 56.0 / 255.0, blue: 213.0 / 255.0, alpha: 1.0)

let gradientLayer = CAGradientLayer()
gradientLayer.frame = viewForReplicatorLayer.bounds
gradientLayer.type = .conic
gradientLayer.colors = [
    orangeColor.cgColor,
    purpleColor.cgColor,
    purpleColor.withAlphaComponent(0).cgColor
]
let center = CGPoint(x: 0.5, y: 0.5)
gradientLayer.startPoint = center
gradientLayer.endPoint = CGPoint(x: 0.5, y: 0)
viewForReplicatorLayer.layer.addSublayer(gradientLayer)

将复制层设置为渐变层的遮罩：

gradientLayer.mask = replicatorLayer

由于我们使用复制器层作为蒙版，因此无需再将其添加为子层，因此请从现有代码中删除以下内容：

viewForReplicatorLayer.layer.addSublayer(replicatorLayer)

坚持使用虚线创建圆形视图但具有多种颜色

Stuck in creating a rounded view with dashed lines but with multiple colors

core-animation

layer

ios

swift