wie Kontrollpunkt auf einer Bezier-Kurve berechnen?

Question

Ich habe eine Bezier-Kurve haben, und an einem bestimmten Punkt, möchte ich eine zweite Bezier-Kurve „abzweigen“, um die erste Kurve in einer glatten Weise. Zusammen mit dem Schnittpunkt (nach der Bezier-Kurve mit einem Prozentsatz) zu berechnen, muß ich auch den Steuerpunkt (die Tangente und Gewicht). Der Schnittpunkt wird mit dem folgenden Stück Javascript berechnet:

getBezier = function getBez(percent,p1,cp1,cp2,p2) {
    function b1(t) { return t*t*t }
    function b2(t) { return 3*t*t*(1-t) }
    function b3(t) { return 3*t*(1-t)*(1-t) }
    function b4(t) { return (1-t)*(1-t)*(1-t) }
    var pos = {x:0,y:0};
    pos.x = p1.x*b1(percent) + cp1.x*b2(percent) + cp2.x*b3(percent) + p2.x*b4(percent);
    pos.y = p1.y*b1(percent) + cp1.y*b2(percent) + cp2.y*b3(percent) + p2.y*b4(percent);
    return pos;
}

(Non IE-Browser kann es in Aktion sehen: http: // www.iscriptdesign.com -> Tutorial -> Gruppen & Pfade). Alles, was ich jetzt brauchen, ist der Kontrollpunkt oder (Tangente und Gewicht) für die Verzweigungs (Ich fange keine Ahnung haben, wo, und ich hoffe, kann jemand etwas Code zeigen, oder mathematische Gleichung, wenn möglich als Funktion von den gleichen Parametern als getBezier Funktion oben).

Answer 1

Gefunden und implementiert es: de-Casteljau Algorithmus die schnellste implementierbare Lösung entpuppte. Es ist derzeit vorhanden unter: iScriptDesign (Tutorial -> Spit Bezier).

Answer 2

Beispiel zur Nutzung (ich glaube, ich brauche Hilfe von @drjerry)

cubic-bezier(.42,0,.58,1):

Ich habe eine css3 Timing-Funktion wird diese Leichtigkeit-in-out genannt. Grafisch sieht es wie: http://cubic-bezier.com/#.42 , 0, .58,1

Ich möchte eine neue Timing-Funktion machen, die nur die untere Hälfte ist und dann obere Hälfte dieses Graphen.

So ist die untere Hälfte ist ease-in: cubic-bezier(.42,0,1,1). Grafisch: http://cubic-bezier.com/#.42,0,1 , 1

Und die obere Hälfte ist ease-out: cubic-bezier(0,0,.58,1). Grafisch: http://cubic-bezier.com/#0,0,.58 , 1

So, jetzt, was mich verwirrt ist, dass nach dem Skript bei iScriptDesign es mir sagt, sie sind anders.

iScriptDeisgn sagt der Ausgangs Hälfte ease-in-out ist (was ease-in ist) ist: cubic-bezier(.21, 0, .355, .25). Grafisch: http://cubic-bezier.com/#.21,0 , .35, .25

iScriptDeisgn sagt der Endung Hälfte ease-in-out ist (was ease-out ist) ist: cubic-bezier(.145, .25, .29, .5). Grafisch: http://cubic-bezier.com/#.14, 0,25, 0,29, 0,5

Warum ist die ease-in und ease-out durch die iScriptDesign Split-Funktion unterscheidet sich von der realen ease-in und echte ease-out zurückgekehrt? Ich verstehe es nicht.

-Code für dieses Beispiel.

//////////////////START FROM ISCRIPTDESIGN
var splitBezier = function(array, perc) {
    array.unshift({x:0, y:0});
    var coll = [];
    while (array.length > 0) {
    for (var i = 0;i < array.length-1; i++) {
        coll.unshift(array[i]);
        array[i] = interpolate(array[i], array[i+1], perc);
    }
    coll.unshift(array.pop());
    }
    return {b1: [{x:coll[5].x, y:coll[5].y}, {x:coll[2].x, y:coll[2].y},{x:coll[0].x, y:coll[0].y}]
        , b2: [{x:coll[1].x - coll[0].x,y:coll[1].y-coll[0].y}, {x:coll[3].x - coll[0].x,y:coll[3].y-coll[0].y}, {x:coll[6].x - coll[0].x,y:coll[6].y-coll[0].y}]};
}

var interpolate = function (p0, p1, percent) {
    if (typeof percent === 'undefined') percent = 0.5;  
    return  {x: p0.x + (p1.x - p0.x) * percent
         , y: p0.y + (p1.y - p0.y) * percent};
}
//////////////////END FROM ISCRIPTDESIGN
var coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
}
var easeInOut = [new coord(.42,0), new coord(.58,1), new coord(1,1)];
var split50percent = splitBezier(easeInOut.slice(), .5);

So split50percent ist eingestellt auf:

({
    b1: [{
        x: 0.21,
        y: 0
    }, {
        x: 0.355,
        y: 0.25
    }, {
        x: 0.5,
        y: 0.5
    }],
    b2: [{
        x: 0.14500000000000002,
        y: 0.25
    }, {
        x: 0.29000000000000004,
        y: 0.5
    }, {
        x: 0.5,
        y: 0.5
    }]
})

---

Das Gleiche gilt für easeInOutSine

• easeInOutSine: 0,44, 0,05, 0,55, 0,95
• REAL
  • easeInSine: 0,47, 0, 0,745, 0,715
  • easeOutSine: 0,39, 0,575, 0,565, 1
• iScriptDesign
  • easeInSine: .22, .03, .36, .26
  • easeOutSine: .14, .24, .28, .48