如何绘制一个手绘的椭圆或圆圈？

Question

我的问题涉及绘制似乎是徒手的线条的各种技巧:

你怎么画像蜡笔？

特别是Steve Hanov发布了这篇优秀的博客文章.

从那以后,我能够使用贝塞尔曲线实现一个漂亮的手绘线算法.但是,我仍然坚持如何实现手绘椭圆.理想情况下,我想给它一个矩形用作边界,类似于其他椭圆绘图调用.但是,我希望它看起来非常写意.

到目前为止,我已经想到了最好的:

- (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弧？

任何人都有我的另一个解决方案或一些示例代码？(任何语言都可以)

Answer 1

所以这个问题已经开放了很长时间了，让我尝试一下。有两个部分：（1）使路径看起来不完美。(2)像手绘一样抚摸路径。对于（1），将事物细分出来。使用 100 个左右的控制点来制作它，并使用缓慢变化的包裹函数来扭曲它们。对于 (2)，在路径上指定缓慢变化的连续厚度和角度，也许还会添加一些噪声。对于一个看起来很好的人类噪音来说，阅读 Perlin 噪音，这真是太棒了。另外，看看其他人是如何做的，在 Photoshop 中创建路径并描边它们总是一个好主意，它有一个选项可以让它看起来很自然。