David
David

Reputation: 889

Add lines to the circle at a given angle in Core Graphics Swift

I create this circle view like this:

circle view

override func draw(_ rect: CGRect) {
        super.draw(rect)
        
        if let context = UIGraphicsGetCurrentContext()
        {
            let width = fmin(self.frame.size.width, self.frame.size.height)
            let offset_x = abs(width - self.frame.size.width)/2
            let offset_y = abs(width - self.frame.size.height)/2
            let padding = CGFloat(0.5)
            let radius_size = (width/2) - (padding*2)
            let circle_width = radius_size/4
            
            context.setStrokeColor(UIColor.black.cgColor)
            
            // Draw a circle
            for i in 0 ..< 4
            {
                let offset = CGFloat(i) * circle_width
                
                context.strokeEllipse(in:
                        CGRect(
                            x: padding + offset + offset_x,
                            y: padding + offset + offset_y,
                            width: (radius_size - offset)*2,
                            height: (radius_size - offset)*2))
            }
            
            context.strokePath()
        }
    }

How can I create a line to the circle center, if I have an array, of angles for the most top circle? And how can I do the same, for the middle circle? For example, I have an array, with the given angles in degrees: [87.0, 112.0, 150.0]

Upvotes: 0

Views: 460

Answers (1)

vacawama
vacawama

Reputation: 154583

Here's a function drawLine that draws a line from a center point at an angle with a specific radius. To change which circle the line reaches, just change the radius:

override func draw(_ rect: CGRect) {
    super.draw(rect)
    
    if let context = UIGraphicsGetCurrentContext()
    {
        let width = fmin(self.frame.size.width, self.frame.size.height)
        let offset_x = abs(width - self.frame.size.width)/2
        let offset_y = abs(width - self.frame.size.height)/2
        let padding = CGFloat(0.5)
        let radius_size = (width/2) - (padding*2)
        let circle_width = radius_size/4
        
        context.setStrokeColor(UIColor.black.cgColor)
        
        // Draw a circle
        for i in 0 ..< 4
        {
            let offset = CGFloat(i) * circle_width
            
            context.strokeEllipse(in:
                    CGRect(
                        x: padding + offset + offset_x,
                        y: padding + offset + offset_y,
                        width: (radius_size - offset)*2,
                        height: (radius_size - offset)*2))
        }
        
        let angles: [CGFloat] = [87.0, 112.0, 150]
        let angles2: [CGFloat] = [210.0, 250.0, 330.0]
        let center = CGPoint(x: width/2 + offset_x, y: width/2 + offset_y)
        
        for angle in angles {
            drawLine(context: context, center: center, radius: radius_size, angle: angle)
        }
        
        for angle in angles2 {
            drawLine(context: context, center: center, radius: radius_size * 3 / 4, angle: angle)
        }
        
        context.strokePath()

    }
}

func drawLine(context: CGContext, center: CGPoint, radius: CGFloat, angle: CGFloat) {
    context.move(to: center)
    context.addLine(to: CGPoint(x: center.x + radius * cos(angle * .pi / 180), y: center.y - radius * sin(angle * .pi / 180)))
}

enter image description here

Upvotes: 1

Related Questions