html kuadratik eğri üzerinde merkez noktası

Question

context.quadraticCurveTo(controlX, controlY, endX, endY); kullanarak html tuval üzerine çizilen kuadratik bir eğri var.

Denetim noktası ve yatay ve birbiriyle mutlaka eşit olmayan başlangıç ​​ve bitiş noktaları var.

Bu parametreleri kullanarak eğrinin merkez noktasını nasıl bulabilirim?

Aslında bu merkez noktasında div etiketi koymak istiyorum. Bu süreçte herhangi bir denklem çözme var mı?

Answer 1

quadraticCurveTo bir quadratic Bézier curve çizer: Burada Ve şemalar ile tam konuda iyi bir öğretici olduğunu. eğrisine (0 ile 1 arasında) belirli bir pozisyonda bir noktaya hesaplayabilmesi için

formüller başlangıç ​​noktası, (x2, y2) (x1, y1) olan

x(t) = (1-t)^2 * x1 + 2 * (1-t) * t * x2 + t^2 * x3 
y(t) = (1-t)^2 * y1 + 2 * (1-t) * t * y2 + t^2 * y3 

olan kontrol noktası ve (x3, y3) bitiş noktasıdır.

Yani, JavaScript içine dönüm, biz

function _getQBezierValue(t, p1, p2, p3) { 
    var iT = 1 - t; 
    return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3; 
} 

function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) { 
    return { 
     x: _getQBezierValue(position, startX, cpX, endX), 
     y: _getQBezierValue(position, startY, cpY, endY) 
    }; 
} 

yarıya kadar pozisyon için 0.5 birlikte orada getQuadraticCurvePoint başlangıç, bitiş ve kontrol noktalarını geçerseniz gibi bir şey ile bitirmek, bir almalısınız X ve Y koordinatları ile nesne.

Yasal Uyarı - Kodu test etmedim, bu nedenle kilometreleriniz değişebilir, ancak , sağ görünüyor. ;)

DÜZENLEME: Kodu bir jsfiddle olarak test ettim. http://jsfiddle.net/QA6VG/

Answer 2

Burada ikinci dereceden denklemi açıklayan bir sayfa ve çözümü: wiki page. tutorial

Answer 3

olası bir yol:

// compute coordinates of the middle point of a quadratic Bezier curve 
// need two functions: quadraticBezierCurvePoint and quadraticBezierCurvesMiddle 

function quadraticBezierCurvePoint(t, c) { 
    // compute relative coordinates of a point on the curve using t and c 
    // t is a number between 0 and 1 
    // c is an array of 3 points: 
    //  the initial point of the curve (always (0,0)) 
    //  the "handle" point of the curve 
    //  the final point of the curve 
    var t1, t1_2a, t1_2b, t1_2c; 
    t1 = 1 - t; 
    t1_2a = t1 * t1; 
    t1_2b = (2 * t) * t1; 
    t1_2c = t * t; 
    return { 
    x: (c[0].x * t1_2a) + (t1_2b * c[1].x) + (t1_2c * c[2].x), 
    y: (c[0].y * t1_2a) + (t1_2b * c[1].y) + (t1_2c * c[2].y) 
    }; 
} 

function quadraticBezierCurvesMiddle(m, c) { 
    var k, km = 1000, 
    km2 = (km >> 1), 
    len = 0, 
    len2, x, y, a = new Array(km + 1); 
    // compute curve lengths from start point to any point 
    // store relative point coordinates and corresponding length in array a 
    for (k = 0; k <= km; k++) { 
    a[k] = { 
     pt: quadraticBezierCurvePoint(k/km, c), 
     len: 0 
    }; 
    if (k > 0) { 
     x = a[k].pt.x - a[k - 1].pt.x; 
     y = a[k].pt.y - a[k - 1].pt.y; 
     a[k].len = a[k - 1].len + Math.sqrt(x * x + y * y); 
    } 
    } 
    // retrieve the point which is at a distance of half the whole curve length from start point 
    // most of the time, this point is not the one at indice km2 in array a, but it is near it 
    len2 = a[km].len/2; 
    if (a[km2].len > len2) 
    for (k = km2; k >= 0; k--) { 
     if (len2 >= a[k].len) break; 
    } else 
    for (k = km2; k <= km; k++) { 
     if (len2 <= a[k].len) break; 
    } 
    // return absolute coordinates of the point 
    return { 
    x: Math.round((a[k].pt.x + m.x) * 100)/100, 
    y: Math.round((a[k].pt.y + m.y) * 100)/100 
    }; 
} 

Ve karşılık gelen jsfiddle: jsfiddle.net/pTccL/