Swift 2.1: Vị trí và phân bố màu CAGradientLayer

Question

Nhu cầu của tôi là hiển thị phân phối 3 màu trong một chế độ xem. Vì vậy, tôi đang sử dụng mã sau đây.

func drawWithGradientLayer() { 

     // total contains sum of all values contained in segmentValues variable. 
     // I'm using green -> Orange -> Red colors as colors 

     if total == 0 { 
      return 
     } 

     if gradientLayer.superlayer != nil { 
      gradientLayer.removeFromSuperlayer() 
     } 

     var previous: CGFloat = (CGFloat(segmentValues[0])/CGFloat(total)) 
     var locations: [NSNumber] = [previous] 

     for var i=1; i<segmentValues.count; i++ { 
      previous = previous + (CGFloat(segmentValues[i])/CGFloat(total)) 
      locations.append(previous) 
     } 

     locations.append(1.0) // Line may need to be commented 

     gradientLayer = CAGradientLayer() 
     gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height) 

     gradientLayer.startPoint = CGPointMake(0.0, 0.5); 
     gradientLayer.endPoint = CGPointMake(1.0, 0.5); 

     gradientLayer.colors = colors 
     gradientLayer.locations = locations 

     self.layer.insertSublayer(gradientLayer, atIndex: 0) 
} 

Nhưng vấn đề là màu gradient không được phân phối theo yêu cầu của tôi. Ví dụ: nếu giá trị ihave của [1,0,1] thanh như vậy sẽ hiển thị 50% màu đỏ & 0% màu cam và 50% màu đỏ. Nếu giá trị là [0,0,1] thì chỉ nên vẽ màu đỏ. Làm thế nào tôi có thể đạt được điều này mà không có đường lưới?

bất kỳ giải pháp khác tốt hơn sẽ luôn luôn được đánh giá cao :)

Answer 1

Mấu chốt ở đây là phải hiểu như thế nào trong công việc locations CAGradientLayer:

Các điểm dừng dốc được quy định như giá trị giữa 0 và 1. Các giá trị phải tăng đơn điệu.

Vì vậy, bạn không thể xác định các địa điểm như [1, 0, 1], mà đúng hơn là nên sử dụng một cái gì đó giống như [0.0, 0.33, 0.67, 1.0], và số lượng các vị trí đánh giá cao phải được giống như đếm colors của bạn.

Để tạo ra một gradient với các chuyển động màu ngắn như trong hình ảnh của bạn, bạn phải lặp lại mỗi màu hai lần và xác định vị trí thích hợp:

Vì vậy, mã của bạn nên được một cái gì đó như:

gradientLayer.colors = [ 
     UIColor.greenColor().CGColor, UIColor.greenColor().CGColor, 
     UIColor.orangeColor().CGColor, UIColor.orangeColor().CGColor, 
     UIColor.redColor().CGColor, UIColor.redColor().CGColor 
    ] 
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5) 
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5) 
    gradientLayer.locations = [0.0, 0.2, 0.3, 0.7, 0.8, 1.0] 

Nếu bạn muốn có độ dốc 2 màu trong khi không thay đổi màu, bạn có thể đặt giá trị nhỏ hơn 0 cho startPoint.x hoặc lớn hơn 1 cho endPoint.x và đặt nhiều vị trí thành 0, ví dụ:

gradientLayer.startPoint = CGPoint(x: -0.01, y: 0.5) 
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5) 
    gradientLayer.locations = [0.0, 0.0, 0.0, 0.0, 0.1, 1.0] 

mà sẽ cho kết quả tương tự như sau: