如何用CoreGraphics绘制一条线,它的线索将开始以一定的长度消失?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用CoreGraphics绘制一条线,它的线索将开始以一定的长度消失?相关的知识,希望对你有一定的参考价值。

从1:04开始,我在这里可以看到我在说什么。 5-10秒后,你会明白我的意思是“小道将开始消失”。

我当前的应用程序绘制了一条微弱的线条,用户在屏幕上移动。然而,当我设置-touchesEnded:withEvent:时,那条线直到imageView.image = nil

我想要实现的是一条正在被绘制的线条,当你绘制线条时,线条的最古老部分将变得更加透明,直到它最终消失。线条绘制可以是基于时间的,也可以基于当前线条长度的长度。

我怎么能实现这个目标?

答案

我不知道你现在是怎么做的,但这就是我要做的事情......

  1. 创建一个自定义对象来存储一小部分路径,以及alphadelay
  2. touchesMoved:中,计算用户触摸位置的变化,并根据该位置生成新的子路径,然后将其包装在自定义对象中。
  3. 使用给定的alphas绘制-drawRect:方法中的所有子路径。
  4. 设置CADisplayLink以更新子路径的alpha和延迟。

首先,让我们定义我们的自定义对象......

/// Represents a small portion of a trail. 
@interface trailSubPath : NSObject

/// The subpath of the trail.
@property (nonatomic) CGPathRef path;

/// The alpha of this section.
@property (nonatomic) CGFloat alpha;

/// The delay before the subpath fades
@property (nonatomic) CGFloat delay;

@end

我们还给它一个方便的初始化器,让它看起来光滑......

@implementation trailSubPath

+(instancetype) subPathWithPath:(CGPathRef)path alpha:(CGFloat)alpha delay:(CGFloat)delay {
    trailSubPath* subpath = [[self alloc] init];
    subpath.path = path;
    subpath.alpha = alpha;
    subpath.delay = delay;
    return subpath;
}

@end

让我们在UIView的顶部定义一些常量(如果你还没有,那么创建一个子类,因为我们将使用-drawRect:绘制)

/// How long before a subpath starts to fade.
static CGFloat const pathFadeDelay = 5.0;

/// How long the fading of the subpath goes on for.
static CGFloat const pathFadeDuration = 1.0;

/// The stroke width of the path.
static CGFloat const pathStrokeWidth = 3.0;

在你的UIView中,你将要存储你的NSMutableArray对象的trailSubPath,以及我们稍后需要的一些其他变量。

我决定使用CADisplayLink来处理trailSubPath对象的更新。这样,代码将在所有设备上以相同的速度运行(以较慢的设备上较低的FPS为代价)​​。

@implementation view {

    UIColor* trailColor; // The stroke color of the trail
    NSMutableArray* trailSubPaths; // The array of trailSubPaths

    CGPoint lastPoint; // Last point the user touched
    BOOL touchedDown; // Whether the user is touching the screen

    CADisplayLink* displayLink; // A display link in order to allow the code to run at the same speed on different devices
}

-initWithFrame:方法中,我们将做一些基本设置......

-(instancetype) initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {

        trailSubPaths = [NSMutableArray array];
        trailColor = [UIColor redColor];

        self.backgroundColor = [UIColor whiteColor];
    }
    return self;
}

现在让我们设置UIResponder触摸方法......

-(void) touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    lastPoint = [[[event allTouches] anyObject] locationInView:self];
    touchedDown = YES;

    [displayLink invalidate]; // In case it's already running.
    displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(displayLinkDidFire)];
    [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

-(void) touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    if (touchedDown) {

        CGPoint p = [[[event allTouches] anyObject] locationInView:self];

        CGMutablePathRef mutablePath = CGPathCreateMutable(); // Create a new subpath
        CGPathMoveToPoint(mutablePath, nil, lastPoint.x, lastPoint.y);
        CGPathAddLineToPoint(mutablePath, nil, p.x, p.y);

        // Create new subpath object
        [trailSubPaths addObject:[trailSubPath subPathWithPath:CGPathCreateCopy(mutablePath) alpha:1.0 delay:pathFadeDelay]];

        CGPathRelease(mutablePath);

        lastPoint = p;
    }
}

-(void) touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    touchedDown = NO;
}

-(void) touchesCancelled:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self touchesEnded:touches withEvent:event];
}

没有什么太复杂的,它只是计算-touchesMoved:上触摸位置的变化,并基于此生成一个新的直线子路径。然后将其包裹在我们的trailSubPath中并添加到数组中。

现在,我们需要在CADisplayLink更新方法中设置逻辑。这将只计算alphas的变化和子路径的延迟,并删除已经淡出的所有子路径:

-(void) displayLinkDidFire {

    // Calculate change in alphas and delays.
    CGFloat deltaAlpha = displayLink.duration/pathFadeDuration;
    CGFloat deltaDelay = displayLink.duration;

    NSMutableArray* subpathsToRemove = [NSMutableArray array];

    for (trailSubPath* subpath in trailSubPaths) {

        if (subpath.delay > 0) subpath.delay -= deltaDelay;
        else subpath.alpha -= deltaAlpha;

        if (subpath.alpha < 0) { // Remove subpath
            [subpathsToRemove addObject:subpath];
            CGPathRelease(subpath.path);
        }
    }

    [trailSubPaths removeObjectsInArray:subpathsToRemove];

    // Cancel running if nothing else to do.
    if (([trailSubPaths count] == 0) && !touchedDown) [displayLink invalidate];
    else [self setNeedsDisplay];
}

最后,我们只想覆盖drawRect:方法,以便在Core Graphics中绘制所有trailSubPath对象:

- (void)drawRect:(CGRect)rect {

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(ctx, trailColor.CGColor);
    CGContextSetLineWidth(ctx, pathStrokeWidth);

    for (trailSubPath* subpath in trailSubPaths) {
        CGContextAddPath(ctx, subpath.path);
        CGContextSetAlpha(ctx, subpath.alpha);
        CGContextStrokePath(ctx);
    }

}

它看起来像很多代码,但我相信你已经有一半设置来绘制你的线!

请注意,根据长度使试验淡出的一种简单方法是将setNeedsDisplay更新方法中的CADisplayLink调用移至-touchesMoved:方法,并使-touchesEnded:上的显示链接无效。

唷。它结束了......我做过的最长的答案。


Finished Result

Le finished result

完整项目:https://github.com/hamishknight/Fading-Trail-Path

以上是关于如何用CoreGraphics绘制一条线,它的线索将开始以一定的长度消失?的主要内容,如果未能解决你的问题,请参考以下文章

如何用 Torch gnuplot 绘制两条线?

使用 Core Graphics 绘制圆弧时绘制的额外线

如何用python绘制彩色蟒蛇

使用 SceneKit 在两点之间绘制一条线

当一条线与一个区域重叠时,如何使用 GDI+ 更改它的颜色?

MATLAB 中加一条直线