7

私の質問には、フリーハンドのように見える線を描くためのさまざまなテクニックが含まれています。

クレヨンのようにどのように描きますか？

具体的には、SteveHanovがこの優れたブログエントリを投稿しました。

それから、ベジェ曲線を使用してフリーハンドラインの見栄えの良いアルゴリズムを実装することができました。しかし、私はフリーハンドの楕円を実装する方法に固執しています。理想的には、他の楕円描画呼び出しと同様に、境界として使用する長方形を指定したいと思います。しかし、私はそれを非常にフリーハンドで見せたいです。

これまでのところ、私がこれを思いついた最高のもの：

- (UIBezierPath*) freehandEllipseFromRect:(CGRect) rect {

    // freehand ellipses need a lil more height
    rect = CGRectMake(rect.origin.x, rect.origin.y-5, rect.size.width, rect.size.height+10);

    UIBezierPath* path = [UIBezierPath bezierPath];


    CGPoint topMidPoint = CGPointMake(rect.origin.x + (rect.size.width/2), rect.origin.y);
    CGPoint bottomMidPoint = CGPointMake(rect.origin.x + (rect.size.width/2), rect.origin.y+rect.size.height);


    // random point along bottom quarter of height, cause makes it look better
    CGFloat randomY = (((CGFloat) (arc4random() % RAND_MAX) / RAND_MAX)) * (rect.size.height/4);
    CGPoint leftControlPoint = CGPointMake(rect.origin.x-(rect.size.width), rect.origin.y+(rect.size.height-randomY));


    // another random y;
    randomY = (((CGFloat) (arc4random() % RAND_MAX) / RAND_MAX)) * (rect.size.height/4);
    CGPoint rightControlPoint = CGPointMake(rect.origin.x+(rect.size.width*2), rect.origin.y+(rect.size.height-randomY));

    CGFloat overshootValueX = (((CGFloat) (arc4random() % RAND_MAX) / RAND_MAX)) * 4;
    CGFloat overshootValueY = (((CGFloat) (arc4random() % RAND_MAX) / RAND_MAX)) * 6;
    [path moveToPoint:CGPointMake(topMidPoint.x+overshootValueX, topMidPoint.y)];        
    [path addQuadCurveToPoint:bottomMidPoint controlPoint:leftControlPoint];

    // random value to overshoot
    overshootValueX = (((CGFloat) (arc4random() % RAND_MAX) / RAND_MAX)) * 20;
    overshootValueY = (((CGFloat) (arc4random() % RAND_MAX) / RAND_MAX)) * 4;
    [path addQuadCurveToPoint:CGPointMake(topMidPoint.x-overshootValueX, topMidPoint.y-overshootValueY) controlPoint:rightControlPoint];
    return path;
}

結果は次のようになります。

フリーハンド楕円

私はそれが上にどれほど尖っているのかが好きではありません、そして私のすべての試みにもかかわらず、私はそれをはるかに良くすることができません。さらに、私は曲線があまり完璧に見えないのが好きで、唯一の「フリーハンド」に見える部分としてオーバーハングに依存していません。2つのクワッドカーブは間違った方法だと思います。

多分4アーク？

誰かが私のために別の解決策やいくつかのサンプルコードを持っていますか？（どの言語でも構いません）

4

2 に答える 2

1

ですから、この質問は長い間開かれてきました。試してみましょう。2つの部分があります：（1）パスを完全ではないように見せます。（2）手で描いたような道をなでる。（1）については、物事からたわごとを細分化します。100程度のコントロールポイントからそれを作り、ゆっくりと変化するラッピング機能でそれらを歪めます。（2）の場合、パス全体にゆっくりと変化する連続的な厚さと角度を割り当て、ノイズを追加することもできます。パーリンノイズを読んだ人間らしいノイズの場合、それは素晴らしいです。また、他の人がどのようにそれを行うかを見て、Photoshopでパスを作成し、それらをストロークすることは常に良い考えです。自然に見えるようにするオプションがあります。

于 2012-02-03T04:37:55.590 に答える
1

個人的には、次のように楕円をパラメトリックに定義します。

x=(width*cos(t)/2)+centerx;
y=(height*cos(t)/2)+centery;

次に、小さな乱数を生成する関数を作成します

曲線の法線ベクトルを見つける関数を作成します（パラメトリックに）

x=width*cos(t);
y=height*sin(t);
normal=UnitVector(x,y);

楕円上のすべてのポイントについて、そのポイントの法線を小さな乱数でスケーリングすることでオフセットします。

3次補間を使用してポイントを通る曲線を描きます。

于 2012-02-05T18:39:09.763 に答える