ios - 如何使用动画笔画绘制矩形

Question

我知道如何用这样的东西在屏幕上绘制一个矩形轮廓:

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGPathRef path = CGPathCreateWithRect(rect, NULL);
    [[UIColor greenColor] setStroke];
    CGContextAddPath(context, path);
    CGContextDrawPath(context, kCGPathFillStroke);
    CGPathRelease(path);
}

但我想要的是让“笔”从矩形的顶部中心开始并以某种可变速度围绕边缘绘制，这样您就可以实际看到矩形随着“笔”的移动而绘制。这可能吗？怎么办？

Answer 1

您可以轻松地将 CALayerShape 与 Pen Image 一起使用并像这样进行操作(我在 View 中添加了一个触发绘图的按钮):

#import "ViewController.h"

@interface ViewController () {
    UIBezierPath *_drawPath;
    CALayer      *_pen;
    UIBezierPath *_penPath;
    CAShapeLayer *_rectLayer;
}
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIImage *penImage = [UIImage imageNamed:@"pen"];

    _drawPath = [UIBezierPath bezierPathWithRect:self.view.frame];

    _penPath = [UIBezierPath bezierPath];
    [_penPath moveToPoint:CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f)];
    [_penPath addLineToPoint:CGPointMake(self.view.frame.size.width - penImage.size.width/2.f, penImage.size.height/2.f)];
    [_penPath addLineToPoint:CGPointMake(self.view.frame.size.width - penImage.size.width/2.f, self.view.frame.size.height - penImage.size.height/2.f)];
    [_penPath addLineToPoint:CGPointMake(penImage.size.width/2.f, self.view.frame.size.height - penImage.size.height/2.f)];
    [_penPath addLineToPoint:CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f)];

    _rectLayer = [[CAShapeLayer alloc] init];
    _rectLayer.path = _drawPath.CGPath;
    _rectLayer.strokeColor = [UIColor greenColor].CGColor;
    _rectLayer.lineWidth = 5.f;
    _rectLayer.fillColor = [UIColor clearColor].CGColor;
    _rectLayer.strokeEnd = 0.f;
    [self.view.layer addSublayer:_rectLayer];

    _pen = [CALayer layer];
    _pen.bounds = CGRectMake(0, 0, 25.f, 25.f);
    _pen.position = CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f);
    _pen.contents = (id)(penImage.CGImage);
    _pen.position = CGPointMake(penImage.size.width/2.f, penImage.size.height/2.f);
    [self.view.layer addSublayer:_pen];
}

- (IBAction)drawRectangle:(id)sender
{
    _rectLayer.strokeEnd = 1.f;

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    anim.fromValue = (id)[NSNumber numberWithFloat:0];
    anim.toValue = (id)[NSNumber numberWithFloat:1.f];
    anim.duration = 5.f;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [_rectLayer addAnimation:anim forKey:@"drawRectStroke"];

    CAKeyframeAnimation *penMoveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    penMoveAnimation.path = _penPath.CGPath;
    penMoveAnimation.rotationMode = kCAAnimationRotateAuto;
    penMoveAnimation.duration = 5.0;
    penMoveAnimation.calculationMode = kCAAnimationPaced;
    [_pen addAnimation:penMoveAnimation forKey:@"followStroke"];
}

编辑:添加了笔跟随笔画的代码，这是使用的 2x 图像:http://cl.ly/image/173J271Y003B

注意:唯一的问题是，当笔靠近旋转点或角时，它仍然与笔划同步，因此笔在翻转之前看起来有点落后于笔划，一个简单的解决方案可能是将曲线，但我不确定您的总体目标是什么。