如何弯曲气球尾（简单的三角形）

Question

我有一个简单的三角形（用作气球尾巴），我试图像以下一样弯曲：

我将尾部形状存储在CGMutablePathRef中，并按如下方式绘制：

- (void) drawPaths
{
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextAddPath(context, self.mutablePath);

    CGPathRelease(mutablePath);
    CGColorRelease(fillColor);
    CGColorRelease(strokeColor);

}

当我向这个算法输入一个角度（比如说45度）时，我试图这样做，尾巴旋转和曲线很像上面的照片。旋转显然是一个简单的转换，但让它曲线化是我努力的方向。我意识到我可能需要使用：CGPathAddQuadCurveToPoint但是我无法理解设置为控制点的内容并且会得到不可预测的结果。即使是这篇精彩的帖子也让我无能为力：Given a CGPath, how to make it curve?

有谁知道怎么做？

Answer 1

我假设您已经或者可以获得路径原点和气球路径末端的x和y坐标，以及终点 - 三角形的尖端 - 您想要的每个的路径。让我们调用原点（xorig，yorig）和终点（xend，yend）。为了制作路径曲线，我们需要计算一个合理的二次曲线协调点，我们称之为（xc，yc）。我相信以下坐标计算将为您产生合理的曲线：

xc = (xorig * 3 + xend) / 4;
yc = (xorig + xend) / 2;
CGPathAddQuadCurveToPoint(mutablePath, NULL, xc, yc, xend, yend).

为了使路径曲线不同，您可以在计算xc时改变xorig和xend的权重。

Answer 2

@interface
V : UIView
@end

@implementation
V
{   UIBezierPath*   u1;
    UIBezierPath*   u2;
}

-   (void)
awakeFromNib
{   u1 = UIBezierPath.bezierPath;
    [   u1
        moveToPoint:CGPointMake( 0, 0 )
    ];
    [   u1
        addQuadCurveToPoint:CGPointMake( 10, 100 )
        controlPoint:CGPointMake( 10, 30 )
    ];
    [   u1
        addQuadCurveToPoint:CGPointMake( 20, 0 )
        controlPoint:CGPointMake( 10, 30 )
    ];
    u1.lineWidth = 3;
    u1.lineJoinStyle = kCGLineJoinBevel;

    u2 = UIBezierPath.bezierPath;
    [   u2
        moveToPoint:CGPointMake( 0, 0 )
    ];
    [   u2
        addQuadCurveToPoint:CGPointMake( 50, 60 )
        controlPoint:CGPointMake( 10, 30 )
    ];
    [   u2
        addQuadCurveToPoint:CGPointMake( 20, 0 )
        controlPoint:CGPointMake( 10, 30 )
    ];
    u2.lineWidth = 3;
    u2.lineJoinStyle = kCGLineJoinBevel;
}

-   (void)
drawRect:(CGRect)p
{   CGContextTranslateCTM( UIGraphicsGetCurrentContext(), 100, 100 );
    [ u1 stroke ];
    CGContextTranslateCTM( UIGraphicsGetCurrentContext(), 100, 0 );
    [ u2 stroke ];
}

@end

此程序会产生以下图像。也许有些提示。

Answer 3

我首先尝试使用PaintCode来查看我能提出的代码和变量。