Min/Max der quadratischen Bezier mit CoreGraphics finden

Question

Ich benutze CoreGraphics, um eine quadratische Bézier zeichnen, aber den Min/Max-Wert der Kurve Computer zu berechnen. Ich bin nicht von einem mathematischen Hintergrund, also ist das ein bisschen lästig geworden. Hat jemand irgendwelche Artikel oder Ideen, wie man das löst?

Answer 1

Für eine quadratische Bezier, dies ist eigentlich ganz einfach.

Definieren Sie Ihre drei Kontrollpunkte als P0 = (x0,y0), P1 = (x1,y1) und P2 = (x2,y2). Um die Extrema in x zu finden, lösen diese Gleichung:

t = (x0 - x1)/(x0 - 2*x1 + x2) 

Wenn 0 <= t <= 1, dann bewerten Sie Ihre Kurve bei t und speichern Sie die Position als Px. Machen Sie dasselbe für y:

t = (y0 - y1)/(y0 - 2*y1 + y2) 

Auch wenn 0 <= t <= 1, bewerten Sie Ihre Kurve bei t und speichern Sie die Position als Py. Schließlich finden Sie die Achse ausgerichtet Bounding-Box mit P0, P2, Px (wenn gefunden) und Py (falls gefunden). Diese Bounding Box wird auch Ihre 2D quadratische Bezier-Kurve fest umschließen.

Answer 2

Calculus gibt die Standard-Trickkiste für das Finden der Min/Max von kontinuierlichen, differenzierbaren Kurven.

Hier ist ein Beispiel Diskussion:

http://newsgroups.derkeiler.com/Archive/Comp/comp.graphics.algorithms/2005-07/msg00334.html

Answer 3

Ich habe eine Darstellung dieses in Javascript gemacht:

Jsfiddle link

function P(x,y){this.x = x;this.y = y; } 
function pointOnCurve(P1,P2,P3,t){ 
    if(t<=0 || 1<=t || isNaN(t))return false; 
    var c1 = new P(P1.x+(P2.x-P1.x)*t,P1.y+(P2.y-P1.y)*t); 
    var c2 = new P(P2.x+(P3.x-P2.x)*t,P2.y+(P3.y-P2.y)*t); 
    return new P(c1.x+(c2.x-c1.x)*t,c1.y+(c2.y-c1.y)*t); 
} 
function getQCurveBounds(ax, ay, bx, by, cx, cy){ 
    var P1 = new P(ax,ay); 
    var P2 = new P(bx,by); 
    var P3 = new P(cx,cy); 
    var tx = (P1.x - P2.x)/(P1.x - 2*P2.x + P3.x); 
    var ty = (P1.y - P2.y)/(P1.y - 2*P2.y + P3.y); 
    var Ex = pointOnCurve(P1,P2,P3,tx); 
    var xMin = Ex?Math.min(P1.x,P3.x,Ex.x):Math.min(P1.x,P3.x); 
    var xMax = Ex?Math.max(P1.x,P3.x,Ex.x):Math.max(P1.x,P3.x); 
    var Ey = pointOnCurve(P1,P2,P3,ty); 
    var yMin = Ey?Math.min(P1.y,P3.y,Ey.y):Math.min(P1.y,P3.y); 
    var yMax = Ey?Math.max(P1.y,P3.y,Ey.y):Math.max(P1.y,P3.y); 
    return {x:xMin, y:yMin, width:xMax-xMin, height:yMax-yMin}; 
}