Как я могу нарисовать эллипс пиксель за пикселем, используя CoreGraphics на iPhone

Question

Я хочу нарисовать эллипс на iPhone, и я хочу видеть его процесс рисования, так же как мы используем ручку, чтобы нарисовать эллипс на листе бумаги.Я должен нарисовать его попиксельно и не использовать CGContextAddEllipseInRect .Как я мог это сделать?

Answer 1

Если вы ориентируетесь на iOS 4.2 и более поздние версии, вы можете использовать новое свойство strokeEnd из CAShapeLayer.

По сути, CAShapeLayer рисует путь, который вы предоставляете. Используя CABasicAnimation в свойстве strokeEnd, вы можете анимировать рисование пути из одной точки в другую.

CGPoint ellipseOrigin = CGPointMake(50, 50);
CGSize ellipseSize = CGSizeMake(200, 100);

CGRect rect = (CGRect){CGPointZero, ellipseSize};
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, rect);   

CAShapeLayer *ellipseLayer = [CAShapeLayer layer];
ellipseLayer.frame = (CGRect){ellipseOrigin, ellipseSize};
ellipseLayer.path = path;
ellipseLayer.strokeColor = [UIColor blackColor].CGColor;
ellipseLayer.fillColor = nil; // transparent inside

CFRelease(path);

// I tested it in the viewDidLoad method of a view controller
[self.view.layer addSublayer:ellipseLayer];

CABasicAnimation *drawAnim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnim.duration = 5.0;
drawAnim.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnim.toValue = [NSNumber numberWithFloat:1.0f];
[ellipseLayer addAnimation:drawAnim forKey:@"strokeEnd"];

Изначально я научился это делать благодаря этому посту в блоге Оле Бегемана: Анимация рисования CGPath с помощью CAShapeLayer .

Answer 2

Я не уверен, что это лучший способ, но я бы предложил использовать квадратные кривые Безье и некоторую форму анимации для рисования разных кривых в каждом кадре.Вам нужно настроить анимацию, используя NSTimer или что-то еще, а затем вызывать setNeedsRedisplay для объекта, который рисует «круг» каждый раз, когда запускается таймер, также обновляя текущий временной шаг объекта рисования анимациипоэтому он знает, какой кадр нужно рассчитать и нарисовать.

При каждом перерисовке необходимо выполнить расчет, чтобы нарисовать требуемую кривую, необходимую для продвижения на шаг вперед в анимации.Вы можете использовать кварцевый метод CGContextAddQuadCurveToPoint(), чтобы нарисовать кривую.Вам понадобятся две кривые для завершения всего эффекта (одна будет использоваться для первой половины анимации, а другая будет использоваться для второй половины).

Надеюсь, это даст несколько начальных мыслей.