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并按照这样做（我在触发绘图的视图中添加了一个按钮）：

#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

注意：唯一的问题是，当笔靠近旋转点或角落时，它仍然随着笔划而节奏，因此笔在笔划后面看起来有点直到它翻转，一个简单的解决方案可能是曲线，但我不确定你的总体目标是什么。

如何使用动画笔划绘制矩形

1 个答案: