2017-05-04 4 views
3

I need to draw image as shown in this link.UIBezierPathを使用してメーターのような半円形のイメージを描く...!誰もがこのことを達成するために私を助けることができる

I have implemented it. And it's like in this link.

私のビューコントローラのコードは、コード

class ViewController: UIViewController { 
    override func viewDidLoad() { 
     super.viewDidLoad() 
     let width: CGFloat = 240 
     let height: CGFloat = 240 

     let demoView = DemoView(frame: CGRect(x: self.view.frame.size.width/2 - width/2, 
               y: self.view.frame.size.height/2 - height/2, 
               width: width, 
               height: height)) 

     let subView = UIView.init(frame: (CGRect(x: demoView.frame.origin.x - width, 
              y: demoView.frame.origin.y, 
              width: width * 2, 
              height: height * 2))) 

     self.view.addSubview(demoView) 
     self.view.addSubview(subView) 

     subView.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5) 
     subView.layer.cornerRadius = subView.frame.size.height/2 
    } 

} 

import UIKit 

class DemoView: UIView { 
    var path: UIBezierPath! 

    override init(frame: CGRect) { 
     super.init(frame: frame) 
     self.backgroundColor = UIColor.darkGray 
    } 

    override func draw(_ rect: CGRect) { 
     self.createTriangle() 
    } 

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

    func createTriangle() {    
     let count : Int = 9 
     let gap : CGFloat = 3 
     let yValue : CGFloat = CGFloat(self.frame.size.width - ((CGFloat(count - 1)) * gap))/CGFloat(count); 

     for a in 0 ..< count { 
      let i : CGFloat = CGFloat(a) 

      let path1: UIBezierPath! = UIBezierPath() 
      path1.move(to: CGPoint(x: 0.0, y: self.frame.size.height)) 
      path1.addLine(to: CGPoint(x: (yValue * i) > 0 ? (yValue * i) + i*gap : 0, y: (yValue * i) > 0 ? (yValue * i) + i*gap : 0)) 
      path1.addLine(to: CGPoint(x:yValue * (i+1) + i*gap, y: yValue * (i+1) + i*gap)) 
      path1.close() 
      UIColor.orange.setFill() 
      path1.fill() 
     } 
    } 
} 

の下に含まれていますか?

編集画像:i have updated image related issue

答えて

2

これはあなたの希望の結果ですか?

enter image description here

私はそれをやった方法は、三角形が、円弧ではありません。あなたのDemoViewクラスでcreatePie()を追加し、代わりにあなたのcreateTriangle()draw(:)でそれを呼び出す 。

これは私のコードです:

func createPie() { 
    // 2 vars to configure width of gap/banches 
    var branchAmount = 10 
    var gapAngle = CGFloat.pi/100 

    let startAngle = 3 * CGFloat.pi/2 
    let endAngle = 2 * CGFloat.pi 
    let branchAngle = (endAngle - startAngle - (CGFloat(branchAmount) - 1) * gapAngle)/CGFloat(branchAmount) 

    let paths = UIBezierPath() 

    for i in 0..<branchAmount { 
     paths.move(to: CGPoint(x: 0.0, y: self.frame.size.height)) 
     paths.addArc(withCenter: CGPoint(x: 0, y: self.frame.size.height), 
        radius: self.frame.size.height, 
        startAngle: startAngle + CGFloat(i) * (branchAngle + gapAngle), 
        endAngle: startAngle + CGFloat(i) * (branchAngle + gapAngle) + branchAngle, 
        clockwise: true) 
    } 
    paths.close() 
    UIColor.orange.setFill() 
    paths.fill() 
} 

乾杯!

EDIT:あなたは、円形のマスクにあなたを追加し、createPie()(今は本当にもはやパイです...)の終わりにこれを追加したい場合は、次の

// Circular mask 
    let maskLayer = CAShapeLayer() 
    let maskPath = UIBezierPath(rect: bounds) 
    maskLayer.fillRule = kCAFillRuleEvenOdd // Circle will be substracted to the mask thanks to this 
    maskPath.move(to: CGPoint(x: 0.0, y: frame.size.height)) 
    maskPath.addArc(withCenter: CGPoint(x: 0, y: frame.size.height), radius: maskRadius, startAngle: startAngle, endAngle: endAngle, clockwise: true) 
    maskLayer.path = maskPath.cgPath 
    layer.mask = maskLayer 

それはちょうど追加boundsthe circle of origin (0, height)

enter image description here

+0

の減算からなるマスクは男ありがとう、あなたは私の一日保存しました...! –

+1

いいえ問題は、良い一日を! – Toldy

+0

こんにちは。私は円を描く間に問題を抱えている。私はイメージで私の質問を更新しました。手伝ってくれませんか...!!!ありがとうございました...!!! –

関連する問題