sizes - Encuentre un punto, una distancia dada, a lo largo de una curva bezier cúbica simple.(¡En un iPhone!)

ios screenshot sizes

Question

Imagine que tiene una curva de bezier de cuatro puntos completamente normal (dos puntos y dos puntos de control) creada con curveToPoint: controlPoint1: controlPoint2: en su aplicación de cacao:

¿Cómo encuentras los puntos (y las tangentes) a lo largo de la curva?

Más tarde: para obtener una solución completa y simplificada basada en la respuesta de Michal a continuación, haga clic en:
Encuentre la tangente de un punto en una curva bezier cúbica (en un iPhone)

Y simplemente copie y pegue el código desde: https://stackoverflow.com/a/31317254/294884

Answer 1

Cualquier curva de Beziér se puede ver simplemente como una función polinomial con coeficientes vectoriales o complejos. Una curva de Beziér cúbica como la de su captura de pantalla se generaría mediante una función polinomial de orden 3, y cada punto de la curva describe el resultado B (t) del polinomio de curva, evaluado para un valor de entrada particular t . Si no me equivoco, una vez que sepa el polinomio usado para crear la curva, puede simplemente resolver B (t) = a + bi , donde a + bi describe el punto en el plano complejo en el que desea encontrar el valor t para. Encontrar raíces en polinomios como ese es un problema bien conocido, y puede resolverse algebraicamente para curvas de orden 2 o inferior, y usar algún método como forward-newton para polinomios de mayor grado. Si conoce el polinomio generador, por supuesto, también debería ser muy sencillo encontrar los derivados. Por lo general, Beziér se extrae de "polinomios de plantilla" donde solo se cambian los coeficientes cuando se dibuja una curva diferente, por lo que probablemente pueda buscarlo en algún lugar de la documentación.

Answer 2

Hay algunos cálculos matemáticos simples detrás del cálculo de las posiciones, puede leerlo en todos los artículos que analizan las curvas de Bézier, incluso en wikipedia. De todos modos, puedo relacionarme con todos los que están en problemas para implementarlo realmente en código, por lo que escribí este UIView de muestra, ya que es probablemente la forma más fácil de comenzar.

#import "MBBezierView.h"
CGFloat bezierInterpolation(CGFloat t, CGFloat a, CGFloat b, CGFloat c, CGFloat d) {
CGFloat t2 = t * t;
CGFloat t3 = t2 * t;
return a + (-a * 3 + t * (3 * a - a * t)) * t
+ (3 * b + t * (-6 * b + b * 3 * t)) * t
+ (c * 3 - c * 3 * t) * t2
+ d * t3;
}
@implementation MBBezierView
- (void)drawRect:(CGRect)rect {
CGPoint p1, p2, p3, p4;
p1 = CGPointMake(30, rect.size.height * 0.33);
p2 = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
p3 = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));
p4 = CGPointMake(-30 + CGRectGetMaxX(rect), rect.size.height * 0.66);
[[UIColor blackColor] set];
[[UIBezierPath bezierPathWithRect:rect] fill];
[[UIColor redColor] setStroke];
UIBezierPath *bezierPath = [[[UIBezierPath alloc] init] autorelease];
[bezierPath moveToPoint:p1];
[bezierPath addCurveToPoint:p4 controlPoint1:p2 controlPoint2:p3];
[bezierPath stroke];
[[UIColor brownColor] setStroke];
for (CGFloat t = 0.0; t <= 1.00001; t += 0.05) {
CGPoint point = CGPointMake(bezierInterpolation(t, p1.x, p2.x, p3.x, p4.x), bezierInterpolation(t, p1.y, p2.y, p3.y, p4.y));
UIBezierPath *pointPath = [UIBezierPath bezierPathWithArcCenter:point radius:5 startAngle:0 endAngle:2*M_PI clockwise:YES];
[pointPath stroke];
}
}
@end

Esto es lo que obtengo:

Answer 3

La aproximación de que t es la distancia a lo largo de la curva que propone Michal puede ser problemática con algunas curvas y para algunos propósitos. Lamentablemente, he buscado sin suerte durante bastante tiempo una implementación de la solución correcta por parte de Obj-C.

Sin embargo, la solución es descrita de manera bastante fantástica por Mike "Pomax" Kamermans en su sorprendente Primer sobre Curvas de Bezier . Incluso tiene todo el código, escrito en el procesamiento y en el dominio público. Estoy sorprendido de que nadie haya convertido esto a Obj-C todavía. Muy tentado, que yo soy.