iOS 动态绘制虚线矩形边框

Question

iOS 动态绘制虚线矩形边框

iosanimationborder

10

我有一个显示图像的UIImageView。我想通过绘制一个圆角矩形轮廓来“突出”图像的一部分。我希望轮廓由粗糙的虚线绘制，并随着连续变化的方式不断变化“线条”的“开始”位置。

我考虑过绘制一个看起来符合要求的圆形，然后简单地对其进行动画处理，但我真正需要的是一个矩形解决方案，所以排除了这种方法。

背景：

我通过计算8个点并绘制4条直线和4条曲线来绘制圆角矩形边框。（也许有更简单的方法，但那不是问题出在哪里！）

我的想法是使用一个“偏移量”变量，该变量从圆角矩形的左上角开始，在左上角曲线与顶部直线段相交处。然后，我将在圆角矩形的顶部沿着“偏移量”递增，直到它达到顶部右侧的曲线，此时我将将“偏移量”变量重置为其原始值。

这基本上已经按照我的意愿工作了，直到发生“重置”的时候。此时，动画会不稳定（有点意料之中），但在一小部分时间内它似乎也会向后移动，然后恢复“前进”运动。最后，在我的虚线的开始/结束处，我得到了一条额外长的线段。我知道它们不能都是等长的（它们可以吗？如何计算？），但我如何使其分成两个较短的线段而不是一个较长的线段？

有人有什么想法可以实现流畅的“蚂蚁行进”效果吗？还有其他想法来使用动画将用户的视线引导到屏幕上的特定区域吗？（它需要环绕特定区域而不遮挡它。）

当前的代码：

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextClearRect(context, rect);

    // Rounded corner will be 10% of average side length (i.e., (w + h) / 2)
    float averageSide = ([self HighlightRect].size.width + [self HighlightRect].size.height) / 2.0;
    float roundSize = averageSide * 0.10;

    // offset is a static, class variable
    offset += roundSize / 4.0;
    if ([WhereIAmView offset] < roundSize) {
        offset = roundSize;
    }
    if ([WhereIAmView offset] > ([self HighlightRect].size.width - roundSize)) {
        offset = roundSize;
    }

    // Set the "main" color of the rounded rectangle
    UIColor *lineColor = [UIColor colorWithRed:027.0/255.0 green:050.0/255.0 blue:224.0/255.0 alpha:1.0];
    CGContextSetStrokeColorWithColor(context, [lineColor CGColor]);
    CGContextSetLineWidth(context, 16.0);
    CGFloat pattern[] = {25.0, 5.0};
    CGContextSetLineDash(context, offset, pattern, 2);

    CGRect rRect = [self HighlightRect];
    // The top left corner
    CGPoint topLeft = CGPointMake(rRect.origin.x, rRect.origin.y);
    // The top right corner
    CGPoint topRight = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y);
    // The bottom right corner
    CGPoint bottomRight = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + rRect.size.height);
    // The bottom left corner
    CGPoint bottomLeft = CGPointMake(rRect.origin.x, rRect.origin.y +     rRect.size.height);

    // The two points across the top of the rounded rectangle (left to right)
    CGPoint point1 = CGPointMake(rRect.origin.x + roundSize, rRect.origin.y);
    CGPoint point2 = CGPointMake(rRect.origin.x + rRect.size.width - roundSize, rRect.origin.y);
    // The two points along the right of the rounded rectangle (top to bottom)
    CGPoint point3 = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + roundSize);
    CGPoint point4 = CGPointMake(rRect.origin.x + rRect.size.width, rRect.origin.y + rRect.size.height - roundSize);
    // The two points along the bottom of the rounded rectangle (right to left)
    CGPoint point5 = CGPointMake(rRect.origin.x + rRect.size.width - roundSize, rRect.origin.y + rRect.size.height);
    CGPoint point6 = CGPointMake(rRect.origin.x + roundSize, rRect.origin.y + rRect.size.height);
    // The two points along the left of the rounded rectangle (bottom to top)
    CGPoint point7 = CGPointMake(rRect.origin.x, rRect.origin.y + rRect.size.height - roundSize);
    CGPoint point8 = CGPointMake(rRect.origin.x, rRect.origin.y + roundSize);

    // Move to point 1
    CGContextMoveToPoint(context, point1.x, point1.y);
    // Add line to point 2 (this is the straight portion across the top)
    CGContextAddLineToPoint(context, point2.x, point2.y);
    // Add curve to point 3 (this is the rounded portion in top right)
    CGContextAddArcToPoint(context, topRight.x, topRight.y, point3.x, point3.y, roundSize);
    // Add line to point 4 (this is the straight portion across the right)
    CGContextAddLineToPoint(context, point4.x, point4.y);
    // Add curve to point 5 (this is the rounded portion in bottom right)
    CGContextAddArcToPoint(context, bottomRight.x, bottomRight.y, point5.x, point5.y, roundSize);
    // Add line to point 6 (this is the straight portion across the bottom)
    CGContextAddLineToPoint(context, point6.x, point6.y);
    // Add curve to point 7 (this is the rounded portion in bottom left)
    CGContextAddArcToPoint(context, bottomLeft.x, bottomLeft.y, point7.x, point7.y, roundSize);
    // Add line to point 8 (this is the straight portion across the left)
    CGContextAddLineToPoint(context, point8.x, point8.y);
    // Add curve to point 1 (this is the rounded portion in top left)
    CGContextAddArcToPoint(context, topLeft.x, topLeft.y, point1.x, point1.y, roundSize);

    // Stroke the path
    CGContextStrokePath(context);

}

提高帖子等级

- mbm29414

你想要圆角图片的“蚂蚁行进”效果吗？ - Vignesh

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vignesh · Accepted Answer

尝试使用CAShapeLayer和形状的CGPath。可以使用Uibezierpath的便捷方法构建圆角矩形路径。您可以为形状图层设置线条模式。动画化形状图层的线条属性将产生"像蚂蚁一样行进的效果"。

shapeLayer = [CAShapeLayer layer];
CGRect shapeRect = CGRectMake(0.0f, 0.0f, 200.0f, 100.0f);
[shapeLayer setBounds:shapeRect];
[shapeLayer setPosition:CGPointMake(160.0f, 140.0f)];
[shapeLayer setFillColor:[[UIColor clearColor] CGColor]];
[shapeLayer setStrokeColor:[[UIColor blackColor] CGColor]];
[shapeLayer setLineWidth:1.0f];
[shapeLayer setLineJoin:kCALineJoinRound];
[shapeLayer setLineDashPattern:
 [NSArray arrayWithObjects:[NSNumber numberWithInt:10], 
  [NSNumber numberWithInt:5], 
  nil]];
  UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:shapeRect cornerRadius:15.0];
[shapeLayer setPath:path.CGPath];
[[imageview layer] addSublayer:shapeLayer];

动画函数可以是：

- (void)toggleMarching
  {
if ([shapeLayer animationForKey:@"linePhase"])
    [shapeLayer removeAnimationForKey:@"linePhase"];
else {
    CABasicAnimation *dashAnimation;
    dashAnimation = [CABasicAnimation 
                     animationWithKeyPath:@"lineDashPhase"];

    [dashAnimation setFromValue:[NSNumber numberWithFloat:0.0f]];
    [dashAnimation setToValue:[NSNumber numberWithFloat:15.0f]];
    [dashAnimation setDuration:0.75f];
    [dashAnimation setRepeatCount:10000];

    [shapeLayer addAnimation:dashAnimation forKey:@"linePhase"];

}
  }