IOS没有在coregraphics中显示替代颜色

Question

在这里，我没有使用核心图形在UIView上获得替代颜色。 我想了解核心图形绘制。

    class ProgressMenuView: UIView {

    var colors : [UIColor] = [UIColor.red, UIColor.green,UIColor.red,UIColor.green]
    var values : [CGFloat] = [50, 100, 150, 180]

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {

        let ctx = UIGraphicsGetCurrentContext()

        var cumulativeValue:CGFloat = 0

        for i in 0..<self.values.count {
            ctx!.fill(CGRect(x: 0, y: cumulativeValue, width:100, height: values[i]))
            ctx!.setFillColor(colors[i].cgColor)
            cumulativeValue += values[i]
        }

    }

}

Answer 1

您需要在调用fill()之前设置填充颜色。当我这样做时，它会按照预期颜色Array绘制颜色。

Answer 2

首先，代码中有一点错误。这些行应该可以颠倒过来：

ctx!.fill(CGRect(x: 0, y: cumulativeValue, width:100, height: values[i])) // ...then fill
ctx!.setFillColor(colors[i].cgColor) // you should first set the color...

我们只需要看看for循环每次迭代开始时每个变量的值是什么。

• 第一次迭代
  • cumulativeValue - 0
  • values[i] - 50
  • colors[i] - 红色
  • 所以这次迭代用红色
  填充rect（0,0,100,50）
• 第二次迭代
  • cumulativeValue - 50
  • values[i] - 100
  • colors[i] - 绿色
  • 所以这次迭代用绿色
  填充rect（0,50,100,100）
• 第3次迭代
  • cumulativeValue - 150
  • values[i] - 150
  • colors[i] - 红色
  • 所以这次迭代用红色
  填充rect（0,150,100,150）
• 第4次迭代
  • cumulativeValue - 300
  • values[i] - 180
  • colors[i] - 绿色
  • 所以这次迭代用绿色
  填充rect（0,300,100,180）

我建议在一张纸上画出这些照片，并用颜色将它们着色。你会看到它是如何工作的。

简要说明一下，values的每个元素都存储视图的每个“段”的长度。有4个段，每个段比前一个段长。 cumulativeValue存储应绘制下一个段的y值。

以下是它在操场上的样子：