2017-03-13 14 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

EDIT: 私はせずに、以下のこれらの行を追加しよう成功。

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が必要です。

ここで、myViewは円グラフセグメントを持つビューです。

は、ご不明な点があると私はあなたがこの事の作業を取得願っていた場合、私に教えてください - かなりクールに見える:)

+0

返信ありがとうございます!私が以前に試したことは多少ありますが、私はどのようにして "myView"を1つのセグメントのビューにすることができるか分かりません。私はそれが "クリッピング"文脈関数か何かを伴わなければならないかもしれないと思うが、私が.move、.addArc、および.fillPathメソッドを使っているので、それを行うことに成功できない。 – Trichophyton

-1

私はあなたが.cg拡張子が欠落していると思います。 gradientlayer colors配列の色は、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) 
関連する問題