統計情報(30日間)


最新情報をツイート

人気の投稿

なめらかな線を描く

このエントリーをはてなブックマークに追加

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


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


そこでサンプル点間の中間点を割り出し、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 での署名描画記事。
こちらはAndroidでの実装。

One Response to なめらかな線を描く

  1. 「線の太さを可変」をCoreGraphicsだけでやるならCGPathCreateCopyByStrokingPathでストロークの輪郭線のCGPathを取得して、それを調整する感じかな。大変そうだけど。むしろ、太さ可変バージョンのCGPathCreateCopyByStrokingPathを自前実装する方がシンプルか

Leave a Reply