swift 使用UIBezierPath使用渐变色填充圆边框

9vw9lbht  于 2023-05-21  发布在  Swift
关注(0)|答案(1)|浏览(211)

我想用渐变色UIBazierpath填充圆的一半边框。
最初我尝试用完整的圆,但它不工作,梯度总是填充圆,但不是边界。有什么办法可以做到这一点吗?
以下是我目前掌握的情况:

let path = UIBezierPath(roundedRect: rect, cornerRadius: rect.width/2)
let shape = CAShapeLayer()
shape.path = path.cgPath
shape.lineWidth = 2.0
shape.strokeColor = UIColor.black.cgColor
self.layer.addSublayer(shape)

let gradient = CAGradientLayer()
gradient.frame = path.bounds
gradient.colors = [UIColor.magenta.cgColor, UIColor.cyan.cgColor]

let shapeMask = CAShapeLayer()
shapeMask.path = path.cgPath
gradient.mask = shapeMask
shapeMask.lineWidth = 2

self.layer.addSublayer(gradient)

编辑:添加图像。我想实现这样的东西.

e4eetjau

e4eetjau1#

核心图形不支持轴向渐变,所以你需要以更手动的方式绘制。
下面是一个自定义视图类,它使用HSV颜色范围围绕圆周绘制一个圆。

class RadialCircleView: UIView {
    override func draw(_ rect: CGRect) {
        let thickness: CGFloat = 20
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = min(bounds.width, bounds.height) / 2 - thickness / 2
        var last: CGFloat = 0
        for a in 1...360 {
            let ang = CGFloat(a) / 180 * .pi
            let arc = UIBezierPath(arcCenter: center, radius: radius, startAngle: last, endAngle: ang, clockwise: true)
            arc.lineWidth = thickness
            last = ang
            UIColor(hue: CGFloat(a) / 360, saturation: 1, brightness: 1, alpha: 1).set()
            arc.stroke()
        }
    }
}

let radial = RadialCircleView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
radial.backgroundColor = UIColor(red: 0.98, green: 0.92, blue: 0.84, alpha: 1) // "antique white"

把这个复制到一个操场上,实验结果。颜色不完全匹配您的图像,但它可能会满足您的需求。

相关问题