user320478
user320478

Reputation: 155

bezierPath in swift 3 on UIView, only curved line needed

When i draw a bezierPath in swift on UIView. I get straight line along with it. I only need the curved line is it possible to remove the straight line.

I can remove gray fill by: line.fillColor = UIColor.clear.cgColor

Not sure how i can remove the straight line

enter image description here

Code:

    let line = CAShapeLayer()
    let linePath = UIBezierPath()
    linePath.move(to: start)
    linePath.addLine(to: end)
    var dis = (end.x - start.x)/3.0
    linePath.addCurve(to: start,
                  controlPoint1: CGPoint(x: start.x + dis, y: start.y + dis),
                  controlPoint2: CGPoint(x: end.x - dis, y: end.y - dis))

    line.path = linePath.cgPath
    line.strokeColor = UIColor.red.cgColor
    //line.fillColor = UIColor.clear.cgColor
    line.lineWidth = 4.0
    line.opacity = 0.6
    self.view.layer.addSublayer(line)

Upvotes: 8

Views: 7237

Answers (2)

Ryosuke Hujisawa
Ryosuke Hujisawa

Reputation: 2872

Please try the code below. Specify the start point and the end point and use pi of the trigonometric function to express the circle curve. If you want to use animation using these, please add the following code to UIView

Example image

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let pi = CGFloat(Float.pi)
        let start:CGFloat = 0.0
        let end :CGFloat = pi
        
        // circlecurve
        let path: UIBezierPath = UIBezierPath();
        path.addArc(
            withCenter: CGPoint(x:self.view.frame.width/4, y:self.view.frame.height/4),
            radius: 300,
            startAngle: start,
            endAngle: end,
            clockwise: true
        )
        let layer = CAShapeLayer()
        layer.fillColor = UIColor.clear.cgColor
        layer.strokeColor = UIColor.orange.cgColor
        layer.path = path.cgPath
        self.view.layer.addSublayer(layer)   
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

Upvotes: 4

Duncan C
Duncan C

Reputation: 131408

Don't close the path. When you close a bezier path it adds a straight line between the beginning and ending of the path. If you don't close the path then it should not do that. (However you can't fill a non-closed path, just stroke it.)

If that doesn't help you, you'll need to edit your question to show your code that creates and draws your path.

Upvotes: 4

Related Questions