Graphics 如何画一个手绘的椭圆或圆?

Graphics 如何画一个手绘的椭圆或圆?,graphics,drawing,shapes,ellipse,Graphics,Drawing,Shapes,Ellipse,我的问题涉及到绘制看似徒手的线条的各种技术: 特别是史蒂夫·哈诺夫(Steve Hanov)发布了这篇精彩的文章 从那时起,我就能够使用贝塞尔曲线实现一个漂亮的徒手画线算法。然而,我被困在如何实现一个手绘外观的椭圆。理想情况下,我想给它一个rect作为边界,类似于其他椭圆绘图调用。但是,我希望它看起来非常写意 到目前为止,我提出的最好的建议是: - (UIBezierPath*) freehandEllipseFromRect:(CGRect) rect { // freehand

我的问题涉及到绘制看似徒手的线条的各种技术:

特别是史蒂夫·哈诺夫(Steve Hanov)发布了这篇精彩的文章

从那时起,我就能够使用贝塞尔曲线实现一个漂亮的徒手画线算法。然而,我被困在如何实现一个手绘外观的椭圆。理想情况下,我想给它一个rect作为边界,类似于其他椭圆绘图调用。但是,我希望它看起来非常写意

到目前为止,我提出的最好的建议是:

- (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;
}
结果如下所示:

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

我不喜欢它的顶端有多尖,尽管我尽了最大的努力,但我还是没能做得更好。另外,我喜欢曲线看起来不那么完美,不依赖于悬挑作为唯一的“徒手”外观部分。我认为两条四次曲线是错误的方向

也许4个弧


有没有人能为我提供其他解决方案或示例代码?(任何语言都可以)

所以这个问题已经存在很长时间了,让我尝试一下。有两个部分:(1)使路径看起来不完美。(2) 像手画的一样抚摸着这条路。
对于第(1)项,将大便从事物中细分出来。使用100个左右的控制点制作,并使用缓慢变化的环绕功能对其进行扭曲。对于(2),在路径上指定缓慢变化的连续厚度和角度,可能还会添加一些噪声。对于一个好看的人形噪音来说,读一下柏林噪音,这真是太棒了。另外,看看别人是怎么做的总是一个好主意,在Photoshop中创建路径并对它们进行笔划,它有一个选项,可以自然地完成

就我个人而言,我会以参数化方式定义椭圆,如下所示:

x=(width*cos(t)/2)+centerx;
y=(height*cos(t)/2)+centery;
然后生成一个生成小随机数的函数

创建一个函数,用于查找曲线的法向量(参数化)

对于椭圆上的每个点,通过将该点处的法线缩放一个小的随机数进行偏移

使用三次插值通过点绘制曲线