UIBezierPath - 波形/噪声数据的平滑图表

Question

我的目标是在用户在屏幕上滑动时实现类似Adobe Illustrator的行.目前它非常不稳定 - 这是当前情况的截图:

我认为这显然是我想要的.我希望平滑这些直线.这叫做抗锯齿吗？

- (void)touchesBegan: (CGPoint)point
{
    currentStroke = [[Stroke alloc] initWithStartPoint:point];
    [strokes addObject:currentStroke];
}

- (void)touchesMoved: (CGPoint)point
{
    if (!currentStroke) {
        [self touchesBegan:point];
    }
    [currentStroke.points addObject:[NSValue valueWithCGPoint:point]]
    pathTwo = [self createPath];
    [self scaleToFit];
    [self setNeedsDisplay];
}

- (UIBezierPath *)createPath {
    UIBezierPath * bezierPath = [UIBezierPath bezierPath];
    for (Stroke * stroke in strokes) {
        [bezierPath moveToPoint:stroke.startPoint];
        for (NSValue * value in stroke.points) {
            [bezierPath addLineToPoint:[value CGPointValue]];
        }
    }
    return bezierPath;
}

- (void)touchesEnded: (CGPoint)point
{
    [points removeAllObjects];
    [self setNeedsDisplay];
}

drawRect 有这个:

[[UIColor whiteColor] setStroke];
[pathTwo setLineWidth: _strokeWidth];
[pathTwo stroke];

编辑

我想我找到了答案... https://github.com/jnfisher/ios-curve-interpolation

鉴于我的createPath公式,我只是不知道如何使用这个.

也许有人可以帮我插入我的阵列？

Answer 1

问题是你在一个手势中捕获的一系列点之间的路径,并且这些点不是全部在同一条线上,因为它们包括当用户手指在屏幕上拖动时发生的自然偏差.

这与"抗锯齿"完全无关,"抗锯齿"是一种使直线看起来更平滑而不会在视觉上分散"锯齿"的技术.但问题不在于你是在尝试改善单条直线的渲染,而是你首先不是绘制直线,而是绘制一堆不具有直线的直线.碰巧排队.

我的目标是在用户在屏幕上滑动时实现类似Adobe Illustrator的行

在这种情况下,您不需要"抗锯齿".所有你需要的是一个createPath是

• moveToPoint到第一点; 和
• addLineToPoint 到最后一点.

只是不要担心其中的任何一点.这个简单的解决方案将产生一条直线,它将从您触摸开始的任何地方开始,并延伸到触摸结束的位置,并将继续这样做直到您抬起手指.

我认为这将转化为:

- (UIBezierPath *)createPath {
    UIBezierPath * bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:stroke.startPoint];
    [bezierPath addLineToPoint:[[stroke.points lastObject] CGPointValue]];
    return bezierPath;
}

如果你不想要一条实际线,而只是想平滑这一点,我建议(a)做滚动平均线来消除你的弹性数据点中的峰值和谷值; (b)使用Hermite或Catmull-Rom样条(如https://spin.atomicobject.com/2014/05/28/ios-interpolating-points/中所述),因此得到的路径是平滑的而不是一系列的线段.

从而

- (UIBezierPath * _Nullable)createActualPathFor:(Stroke *)stroke {
    if (stroke.points.count < 2) return nil;

    UIBezierPath * path = [UIBezierPath bezierPath];

    [path moveToPoint:[stroke.points.firstObject CGPointValue]];
    for (NSInteger i = 1; i < stroke.points.count; i++) {
        [path addLineToPoint:[stroke.points[i] CGPointValue]];
    }

    return path;
}

- (UIBezierPath * _Nullable)createSmoothedPathFor:(Stroke *)stroke interval:(NSInteger)interval {
    if (stroke.points.count < 2) return nil;

    NSMutableArray <NSValue *> *averagedPoints = [NSMutableArray arrayWithObject:stroke.points[0]];

    NSInteger current = 1;
    NSInteger count = 0;
    do {
        CGFloat sumX = 0;
        CGFloat sumY = 0;
        do {
            CGPoint point = [stroke.points[current] CGPointValue];
            sumX += point.x;
            sumY += point.y;
            current++;
            count++;
        } while (count < interval && current < stroke.points.count);

        if (count >= interval) {
            CGPoint average = CGPointMake(sumX / count, sumY / count);
            [averagedPoints addObject:[NSValue valueWithCGPoint:average]];
            count = 0;
        }
    } while (current < stroke.points.count);

    if (count != 0) {
        [averagedPoints addObject:stroke.points.lastObject];
    }

    return [UIBezierPath interpolateCGPointsWithHermite:averagedPoints closed:false];
}

将产生以下结果(实际数据点为蓝色,平滑的再现为红色):

请注意,我假设你的数组points中Stroke包含的起点,所以你可能需要调整是否发生相应.