Как искривить хвост воздушного шара (простая форма треугольника)

У меня есть простая треугольная форма (которая служит хвостом воздушного шара), которую я пытаюсь кривить следующим образом:

У меня есть форма хвоста, сохраненная в CGMutablePathRef, и она выглядит следующим образом:

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

    CGContextAddPath(context, self.mutablePath);

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

}

Я пытаюсь сделать это, когда я ввожу некоторый угол в этот алгоритм (скажем, 45 градусов), что хвост вращается и нагибается так же, как на приведенной выше фотографии. Вращение, очевидно, легкое преобразование, но получение его кривой - это то, с чем я борюсь. Я понимаю, что мне, вероятно, нужно использовать: CGPathAddQuadCurveToPoint однако мне трудно понять, что устанавливать в качестве контрольных точек, и я получаю непредсказуемые результаты. Даже этот блестящий пост оставил меня бессловесным: Учитывая CGPath, как это сделать?

Кто-нибудь знает, как это сделать?

Ответ 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).

Чтобы сделать кривую пути по-разному, вы можете варьировать веса xorig и xend при вычислении xc.

Ответ 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

Эта программа выводит следующее изображение. Возможно, некоторые подсказки.

Ответ 3

Я бы сначала экспериментировал с PaintCode, чтобы узнать, какой код и переменные я могу придумать.