Question

我正在使用CGGradiant绘制从红色到黄色到绿色的三种颜色的3/4圆弧形曲线。但是CGGradiant总是从略微的黄色而不是红色开始设置颜色。我使用它的原因是因为我在drawLinearGradient中给出了起点/终点，但是不确定该怎么做。下面是代码和附加结果。任何建议都会有所帮助。

     let path1 = UIBezierPath(arcCenter: center,
                             radius: radius-20,
                             startAngle: startAngle,
                             endAngle: endAngle,
                             clockwise: false)

    let strokedPath = path1.cgPath.copy(strokingWithWidth: strokeWidth, lineCap: .butt, lineJoin: .miter, miterLimit: 0)
    ctx!.addPath(strokedPath)
    ctx?.clip()
    let red = UIColor(red: 234.0/255.0, green: 34.0/255.0, blue: 34.0/255.0, alpha:1)
    let green = UIColor(red: 254.0/255.0, green: 187.0/255.0, blue: 3.0/255.0, alpha:1)
    let blue = UIColor(red: 69.0/255.0, green: 207.0/255.0, blue: 51.0/255.0, alpha:1)

    let gradient = CGGradient(
        colorsSpace: CGColorSpaceCreateDeviceRGB(),
        colors: [red.cgColor, green.cgColor,blue.cgColor] as CFArray,
        locations: [0,0.5,1]
    )

    context!.drawLinearGradient(
        gradient!,
        start: CGPoint(x: 20, y: 20),
        end: CGPoint(x: rect.width-10, y: rect.height-10),
        options: []
    )

Answer 1

您的渐变类型不合适。现在，渐变从左上角开始，然后移动到右下角。这称为线性梯度。

这就是为什么您在左上方看到红色，在右上方和左下方看到黄色，而在右下方看到绿色的原因。

您想要的是一个圆锥形渐变，类似于下图。

不幸的是，CGGradient并未定义创建此方法的简单方法（如this SO page says），因此请使用“ iOS圆锥渐变”一词使用推荐的框架之一或google。

CGGradient现在在UIBazierPath上绘制精确的颜色

1 个答案: