CODEWITHSUNDEEP
iphonecore-graphics
Nina
Nina

Reputation: 1679

Core graphics - Line using midpoint and angle

I hope it is possible to draw a line using center point and angle. I need to draw the line to move along with a circle.But I couldn’t make it work. I am not getting any idea how could do this!I tried the following code to rotate the line by specified angle, it didn’t work. As I am fairly new, I couldn’t understand where I am making mistake!! This is how it looks if I use the below code

- (void)drawThumbAtPoint:(CGPoint)sliderButtonCenterPoint inContext:(CGContextRef)context {

//Vertical line
CGPoint newPoint = [self convertPoint:sliderButtonCenterPoint toView:self];
CGFloat angleInRadians = (CGFloat)M_PI/180.0f * currentAngle;
CGFloat distance = 15;
CGPoint point = CGPointMake(newPoint.x + distance * sinf(angleInRadians), newPoint.y + distance * cosf(angleInRadians));

UIGraphicsPushContext(context);
CGContextBeginPath(context);
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 10.f;
[path moveToPoint:sliderButtonCenterPoint];
[path addLineToPoint:point];
[[UIColor redColor] set];
[path stroke];
//  CGAffineTransform rot = CGAffineTransformMakeRotation(angleInRadians);
//  [path applyTransform:rot];
UIGraphicsPopContext();
}

And,

CGPoint thumbCenterPoint = CGContextGetPathCurrentPoint(context);
[self drawThumbAtPoint:thumbCenterPoint inContext:context];

Upvotes: 2

Views: 524

Answers (2)

Baran
Baran

Reputation: 2820

Here a similar solution in Swift 4.1:

    // adding progress line view:
    // progress: 360 circle degree <=> 100% progress 
    let currentAngle: CGFloat = (progress * 360 / 100) - 90
    let angleInRadians: CGFloat = currentAngle * CGFloat.pi / 180

    let radius: CGFloat = outerCircle.frame.width / 2 - 1.0
    let lineXPosition = outerCircle.center.x + radius * cos(angleInRadians)
    let lineYPosition = outerCircle.center.y + radius * sin(angleInRadians)

    let progressLineView = UIView(frame: .init(x: lineXPosition, y: lineYPosition, width: 1, height: 1))
    progressLineView.backgroundColor = .clear
    progressLineView.transform = CGAffineTransform(rotationAngle: (progress * 360 / 100) * CGFloat.pi / 180)
    progressLineView.layer.cornerRadius = 1.0

    let progressLineSubView = UIView(frame: .zero)
    progressLineSubView.translatesAutoresizingMaskIntoConstraints = false
    progressLineSubView.backgroundColor = .blue
    progressLineSubView.layer.allowsEdgeAntialiasing = true
    progressLineSubView.layer.cornerRadius = 1.0
    progressLineView.addSubview(progressLineSubView)
    NSLayoutConstraint.activate([
        progressLineSubView.centerXAnchor.constraint(equalTo: progressLineView.centerXAnchor),
        progressLineSubView.centerYAnchor.constraint(equalTo: progressLineView.centerYAnchor),
        progressLineSubView.widthAnchor.constraint(equalToConstant: 2.0),
        progressLineSubView.heightAnchor.constraint(equalToConstant: 8.0)
        ])
    addSubview(progressLineView)

Upvotes: 0

Martin R
Martin R

Reputation: 539795

A unit vector with angle alpha to the x-axis is 

(cos(alpha), sin(alpha))

Now you want to draw a line that is tangential to the circle line, so it is perpendicular to the line from the center of the circle to the point on the circle line.

To get a perpendicular vector, you add 90º = π/2 to the angle:

(cos(alpha + π/2), sin(alpha + π/2)) = (-sin(alpha), cos(alpha))

using basic trigonometric identities.

This (hopefully) explains why the endpoint of the line must be computed as 

CGPointMake(newPoint.x - distance * sinf(angleInRadians), newPoint.y + distance * cosf(angleInRadians));

Upvotes: 2

Related Questions