Неизбежный UIBezierPath изгибающий механизм, контрольная точка и точка кривой

Question

Я пытаюсь нарисовать простую форму параболы, используя UIBezierPath. У меня есть maxPoint и boundingRect, из которых я основываю ширину и длину параболы.
Вот функция, которую я сделал, чтобы нарисовать параболу (рисую параболу в представлении контейнера, rect будет container.bounds):

func addParabolaWithMax(maxPoint: CGPoint, inRect boundingRect: CGRect) { 
    let path = UIBezierPath() 

    let p1 = CGPointMake(1, CGRectGetMaxY(boundingRect)-1) 
    let p3 = CGPointMake(CGRectGetMaxX(boundingRect)-1, CGRectGetMaxY(boundingRect)-1) 

    path.moveToPoint(p1) 
    path.addQuadCurveToPoint(p3, controlPoint: maxPoint) 

    // Drawing code 
    ... 
} 

Моя проблема в том, что я хочу maxPoint, что я отправляю в функции быть фактической крайней точкой в ​​самой параболе. Так, например, если я отправлю в (CGRectGetMidX(container.bounds), 0), максимальная точка должна быть в самом верхнем центре. Но при использовании этой функции с этой конкретной точкой, это то, что результат выглядит следующим образом:

Так что же путь делает здесь? Или, другими словами, как я могу получить от controlPoint до фактической максимальной точки, которая мне нужна? Я попытался добавить и вычесть разные значения из значения y, основанного на высоте boundingRect, но я не мог найти правильную комбинацию, так как в разных точках с разными значениями y она ведет себя по-разному. Кажется, есть какой-то мультипликатор, который добавляется, как я могу его решить?

Answer 1

Для майских приложений решение adam.wulf является хорошо, но это не создает параболу. Чтобы создать параболу, нам нужно вычислить контрольную точку, учитывая середину квадратичной кривой. Пути Безье - это просто математика; мы можем легко вычислить это. Нам просто нужно инвертировать функцию Безье и решить ее при t = 0,5.

Решение Безье на 0,5 (средняя точка) получается красиво на Draw a quadratic Bézier curve through three given points.

2*Pc - P0/2 - P2/2 

Где Pc это точка, мы хотим, чтобы пройти и P0 и P2 являются конечными точками.

(Вычисление Безье в других точках не очень интуитивно. Значение при t = 0,25 не является «четверть пути по пути». Но, к счастью для наших целей, t = 0,5 подходит для нашей интуиции довольно хорошо «средняя точка» по квадратичной величине.)

С учетом нашего решения мы можем написать наш код. Простите перевод в Swift 3; моя копия Xcode 7.3 не очень довольна игровыми площадками iOS, но ее легко преобразовать в 2.2.

func addParabolaWithMax(maxPoint: CGPoint, inRect boundingRect: CGRect) -> UIBezierPath { 

    func halfPoint1D(p0: CGFloat, p2: CGFloat, control: CGFloat) -> CGFloat { 
     return 2 * control - p0/2 - p2/2 
    } 

    let path = UIBezierPath() 

    let p0 = CGPoint(x: 0, y: boundingRect.maxY) 
    let p2 = CGPoint(x: boundingRect.maxX, y: boundingRect.maxY) 

    let p1 = CGPoint(x: halfPoint1D(p0: p0.x, p2: p2.x, control: maxPoint.x), 
        y: halfPoint1D(p0: p0.y, p2: p2.y, control: maxPoint.y)) 

    path.move(to: p0) 
    path.addQuadCurve(to: p2, controlPoint: p1) 
    return path 
} 

halfPoint1D функция является одномерной реализацией нашего решения.Для нашего двумерного CGPoint нам просто нужно позвонить ему дважды.

Если бы я мог порекомендовать только один ресурс для понимания кривых Безье, вероятно, это был раздел "Constructing Bézier curves" из Википедии. Изучая маленькие анимации, которые показывают, как возникают кривые, я нахожу очень интересным. Раздел «Конкретные случаи» также полезен. Для глубокого изучения темы (и той, которую я рекомендую всем разработчикам иметь знакомое знакомство), мне нравится A Primer on Bézier Curves. Это нормально, чтобы сфотографировать его и просто прочитать части, которые вас интересуют в данный момент. Но базовое понимание этой группы функций будет иметь большое значение для устранения магии от рисования в Core Graphics и сделать UIBezierPath инструментом, а не черным ящиком.

Answer 2

пусть путь = UIBezierPath()

 let p1 = CGPointMake(0,self.view.frame.height/2) 
     let p3 = CGPointMake(self.view.frame.width,self.view.frame.height/2) 

     path.moveToPoint(p1) 
     path.addQuadCurveToPoint(p3, controlPoint: CGPoint(x: self.view.frame.width/2, y: -self.view.frame.height/2)) 

     let line = CAShapeLayer() 
     line.path = path.CGPath; 
     line.strokeColor = UIColor.blackColor().CGColor 
     line.fillColor = UIColor.redColor().CGColor 
     view.layer.addSublayer(line) 

это причина: https://cdn.tutsplus.com/mobile/authors/legacy/Akiel%20Khan/2012/10/15/bezier.png вы должны рассматривать понятие касательной

Answer 3

Хитрость заключается в том, чтобы разбить кривую на две части, так что вы можете контролировать которая указывает, что кривая проходит. Как упоминалось в ответе Эдуардо, контрольные точки обрабатывают касательную, а конечные точки находятся на кривой. Это позволяет иметь кривую из левого нижнего угла в верхней части, а затем от верхнего центра в нижнем правом углу:

let p1 = CGPointMake(0,self.view.frame.height/2) 
let p3 = CGPointMake(self.view.frame.width,self.view.frame.height/2) 
let ctrlRight = CGPointMake(self.view.frame.width,0) 
let ctrlLeft = CGPointZero 

let bezierPath = UIBezierPath() 
bezierPath.moveToPoint(p1) 
bezierPath.addCurveToPoint(maxPoint, controlPoint1: p1, controlPoint2: ctrlLeft) 
bezierPath.addCurveToPoint(p3, controlPoint1: ctrlRight, controlPoint2: p3) 

UIColor.blackColor().setStroke() 
bezierPath.lineWidth = 1 
bezierPath.stroke()