iPhone: Vẽ một đường cong cho đến khi nó trở thành hình động vòng tròn

Question

Tôi muốn vẽ một đường cong cho đến khi nó quay tròn đầy đủ và tham gia để trở thành một vòng tròn hoàn chỉnh, chỉ đường viền hình tròn, không được lấp đầy. Điều này phải được làm động trong một vài giây.

Có ai có thể chỉ cho tôi đúng hướng không? Tôi đã yêu cầu một số similar question cho điều này nhưng tôi đã diễn đạt nó không chính xác nên mọi người đều có một thời gian khó hiểu ý tôi và do đó nó đã bị lạc trong biển các câu hỏi.

Nhiều Nhờ sự giúp đỡ

[sửa]

Tôi hiện đang phụ classing UIView và drawRect trọng. Tôi tìm thấy mã để vẽ một vòng tròn đầy nhưng tôi chỉ yêu cầu đột quỵ.

- (void)drawRect:(CGRect)rect { 
// Drawing code 

CGRect allRect = self.bounds; 
CGRect circleRect = CGRectInset(allRect, 2.0f, 2.0f); 

CGContextRef context = UIGraphicsGetCurrentContext(); 

// Draw background 
CGContextSetRGBStrokeColor(context, self.strokeValueRed, self.strokeValueGreen, self.strokeValueBlue, self.strokeValueAlpha); // white 
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 0.1f); // translucent white 
CGContextSetLineWidth(context, self.lineWidth); 
CGContextFillEllipseInRect(context, circleRect); 
CGContextStrokeEllipseInRect(context, circleRect); 

// Draw progress 
CGPoint center = CGPointMake(allRect.size.width/2, allRect.size.height/2); 
CGFloat radius = (allRect.size.width - 4)/2; 
CGFloat startAngle = - ((float)M_PI/2); // 90 degrees 
CGFloat endAngle = (self.progress * 2 * (float)M_PI) + startAngle; 
CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f); // white 
CGContextMoveToPoint(context, center.x, center.y); 
CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0); 
CGContextClosePath(context); 
CGContextFillPath(context); 
} 

[sửa # 2]

tôi đã thay đổi mã để loại bỏ tất cả các tài liệu tham khảo điền nhưng bây giờ nó bất cứ điều gì không vẽ :(bất kỳ ý tưởng?

- (void)drawRect:(CGRect)rect 
{ 
// Drawing code 

CGRect allRect = self.bounds; 
CGContextRef context = UIGraphicsGetCurrentContext(); 

// Draw background 
CGContextSetRGBStrokeColor(context, self.strokeValueRed, self.strokeValueGreen, self.strokeValueBlue, self.strokeValueAlpha); // white 
CGContextSetLineWidth(context, 5); 

// Draw progress 
CGPoint center = CGPointMake(allRect.size.width/2, allRect.size.height/2); 
CGFloat radius = (allRect.size.width - 4)/2; 
CGFloat startAngle = - ((float)M_PI/2); // 90 degrees 
CGFloat endAngle = (self.progress * 2 * (float)M_PI) + startAngle; 
CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0); 
CGContextStrokePath(context); 
} 

[sửa # 3] Giải pháp

Tôi cảm thấy giống như một dickhead đúng! Vấn đề là các giá trị màu sắc đột quỵ không được khởi tạo có nghĩa là dòng đã được rút ra nhưng rõ ràng là không thể nhìn thấy nó !!

Answer 1

Đưa ra mọi thứ có nội dung Điền.

Thay đổi CGContextFillPath ở cuối CGContextStrokePath.

Lấy CGContextMoveToPoint và CGContextClosePath gần cuối. Những người chỉ phác thảo các mặt thẳng của nêm.

Bạn có thể phải thay đổi CGContextMoveToPoint để di chuyển đến điểm bắt đầu của vòng cung thay vì tâm, thay vì lấy nó ra.

Answer 2

Một cách tiếp cận rất thẳng về phía trước có thể là phân lớp UIView và có vẽ một vòng cung có chiều dài thay đổi. Sau đó, bạn có thể sử dụng bộ hẹn giờ để cập nhật định kỳ góc xoay

Answer 3

Đây là câu trả lời giống như câu trả lời của tôi cho câu hỏi khác của bạn here.

Điều bạn thực sự cần thực hiện là tạo hiệu ứng đột quỵ của CAShapeLayer trong đó đường dẫn là hình tròn. Điều này sẽ được tăng tốc bằng cách sử dụng Core Animation và ít lộn xộn hơn sau đó để vẽ một phần của một vòng tròn trong -drawRect :.

Đoạn mã dưới đây sẽ tạo ra một lớp hình tròn ở giữa màn hình và tạo hiệu ứng cho nét vẽ theo chiều kim đồng hồ sao cho có vẻ như nó đang được vẽ. Bạn có thể sử dụng bất kỳ hình dạng nào bạn muốn. (Bạn có thể đọc this article trên blog của Ole Begemanns để tìm hiểu thêm về cách animate đột quỵ của một Shape Layer.)

Lưu ý: rằng các thuộc tính stoke là không giống như các thuộc tính biên giới trên lớp. Để thay đổi chiều rộng của nét, bạn nên sử dụng "lineWidth" thay vì "borderWitdh", v.v.

// Set up the shape of the circle 
int radius = 100; 
CAShapeLayer *circle = [CAShapeLayer layer]; 
// Make a circular shape 
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) 
             cornerRadius:radius].CGPath; 
// Center the shape in self.view 
circle.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, 
           CGRectGetMidY(self.view.frame)-radius); 

// Configure the apperence of the circle 
circle.fillColor = [UIColor clearColor].CGColor; 
circle.strokeColor = [UIColor blackColor].CGColor; 
circle.lineWidth = 5; 

// Add to parent layer 
[self.view.layer addSublayer:circle]; 

// Configure animation 
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
drawAnimation.duration   = 10.0; // "animate over 10 seconds or so.." 
drawAnimation.repeatCount   = 1.0; // Animate only once.. 

// Animate from no part of the stroke being drawn to the entire stroke being drawn 
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
drawAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 

// Experiment with timing to get the appearence to look the way you want 
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 

// Add the animation to the circle 
[circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];