なめらかな線を描く

署名（クレカのサインなど）をなめらかに描く方法の解説。

Capture a Signature on iOS

タッチを単純に追うだけだとガクガク。

そこでサンプル点間の中間点を割り出し、BezierPathで描く。

コードは難しくない。

static CGPoint midpoint(CGPoint p0, CGPoint p1) {
    return (CGPoint) {
        (p0.x + p1.x) / 2.0,
        (p0.y + p1.y) / 2.0
    };
}

- (void)pan:(UIPanGestureRecognizer *)pan {
    CGPoint currentPoint = [pan locationInView:self];
    CGPoint midPoint = midpoint(previousPoint, currentPoint);

    if (pan.state == UIGestureRecognizerStateBegan) {
        [path moveToPoint:currentPoint];
    } else if (pan.state == UIGestureRecognizerStateChanged) {
        [path addQuadCurveToPoint:midPoint controlPoint:previousPoint];
    }

    previousPoint = currentPoint;

    [self setNeedsDisplay];
}

するとこうなる。

方法は単純だが効果的。

記事ではさらに筆跡を真似る為に線の太さを可変にする事にも触れられている。

ただCoreGraphicsでは可変幅の線は描けないので OpenGL ES を使って実装している。


この記事の中で紹介されていた square での署名描画記事。

Smoother Signatures

こちらはAndroidでの実装。