2017-03-13 8 views
0

나는이 질문이 꽤 두 번에 걸쳐 있다는 것을 알고있다. 내 사건에 대한 모든 답변을 구현하려고했지만 그 일을하는 방법을 알 수 없습니다.선형 그래디언트가있는 원형 차트 - 신속한

필자는 일종의 파이 차트가 있으며 모든 세그먼트에 그라디언트를 만들고 싶습니다. 예를 들어 가운데가 녹색이고 가운데가 (또는 그 밖의 모든 것 ...)가 떨어지면 빨간색이됩니다. 그러나 나는 모든 화면을 차지하는 그라디언트에 직면하고 있습니다 (컨텍스트가 어떻게 작동하는지 이해하지 못했던 것처럼 보입니다). 또는 아무 것도 볼 수 없습니다.

override func draw(_ rect: CGRect) 
    { 
     let centerX = (bounds.size.width)/2 
     let centerY = (bounds.size.height)/2 
     let center = CGPoint(x: centerX, y: centerY) 
     let radius: (CGFloat) = min(centerX/2, centerY/2) 
     let context = UIGraphicsGetCurrentContext() 

     // A method where I configure labels 
     func label(text: String, value: CGFloat, angle: CGFloat, color: UIColor) { 

      let labX = centerX + cos(angle) * newValue * 1.2 
      let labY = centerY + sin(angle) * newValue * 1.2 
      let myLabel = UILabel(frame: CGRect(x: labX, y: labY, width: 80, height: 40)) 

      ... 
      addSubview(myLabel) 
     } 

     // Configure arc -> where I try to add gradients to my segments 
     func arc(radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat) { 

      var finalRadius: CGFloat = radius 
      if radius == -1 { 
       finalRadius = 100 
       phenotypeColor = UIColor.init(red: 159/255.0, green: 193/255.0, blue: 204/255.0, alpha: 0.5) 
      } 
      else { 
       phenotypeColor = UIColor.orange 
      } 

      context?.setFillColor(phenotypeColor.cgColor) 
      context?.move(to: center) 
      context?.addArc(center: center, radius: finalRadius, startAngle: startAngle, endAngle: edAngle, clockwise: true) 
      context?.fillPath() 

      // I would like to implement here a gradient layer to the newly-created arc. I tried o add a CAGradientLayer but I cannot apply it to the segment area... 
     } 

     // One arc 
     label(text: ..., value: ..., angle: ..., color: ...) 
     arc(radius: ..., startAngle: ..., endAngle: ...) 

     //Another arc 
     ... 


    } 

누군가가 나를 도울 수 있다면

은 ...

이것은 내가 어떤 그라데이션없이 무엇을 단지 이미지입니다 : enter image description here

편집 : 나는 어떤없이 아래 그 라인을 추가하려고 성공.

let path = UIBezierPath(arcCenter: center, radius: finalRadius, startAngle: myStartAngle, endAngle: myEndAngle, clockwise: true) 
    let RectView = path.bounds 
    let myView = UIView.init(frame: RectView) 
    let gradientLayer = CAGradientLayer() 
    gradientLayer.frame = myView.bounds 
    gradientLayer.colors = [UIColor.red, UIColor.blue] 
    myView.layer.addSublayer(gradientLayer) 

아무도 내가 경로에서 UIView를 얻을 수있는 방법을 말해 줄 수 있습니까?

답변

0

여기 CAGradientLayer가 필요합니다.

let gradientLayer = CAGradientLayer() 
gradientLayer.frame = myView.bounds 
gradientLayer.colors = [UIColor.red, UIColor.blue] 
myView.layer.addSublayer(gradientLayer) 

여기서 myView는 파이 차트 세그먼트가있는보기입니다.

당신이 추가 질문을하고 난 당신이이 일의 작업을 얻을 희망 알려줘은 - 정말 멋진 모습 :)

+0

답해 주셔서 감사합니다. Thath는 이전에 시도한 것보다 다소 차이가 있지만 "myView"를 한 세그먼트의 뷰로 가져올 수있는 방법이 확실하지 않습니다. 나는 그것이 "clipping"컨텍스트 함수 또는 다른 것을 포함해야한다고 생각하지만 .move, .addArc 및 .fillPath 메소드를 사용하기 때문에 성공할 수 없습니다. – Trichophyton

-1

난 당신이 .cg 확장을 누락 생각합니다. 그라디언트 색상 배열의 색상은 UiColors가 아닌 cgColors 여야합니다.

let path = UIBezierPath(arcCenter: center, radius: finalRadius, startAngle: myStartAngle, endAngle: myEndAngle, clockwise: true) 
let RectView = path.bounds 
let myView = UIView.init(frame: RectView) 
let gradientLayer = CAGradientLayer() 
gradientLayer.frame = myView.bounds 
gradientLayer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor] 
myView.layer.addSublayer(gradientLayer)