एचटीएमएल क्वाड्रैटिक वक्र पर केंद्र बिंदु

Question

मेरे पास context.quadraticCurveTo(controlX, controlY, endX, endY); का उपयोग कर एचटीएमएल कैनवास पर खींचा गया एक चौकोर वक्र है।

मेरे पास नियंत्रण-बिंदु और प्रारंभिक और अंतिम बिंदु हैं, जो क्षैतिज रूप से एक-दूसरे के साथ आवश्यक स्तर नहीं हैं।

मैं इन पैरामीटर का उपयोग कर वक्र पर केंद्र बिंदु कैसे ढूंढ सकता हूं?

वास्तव में मैं इस केंद्र बिंदु पर एक div टैग रखना चाहता हूं। क्या इस प्रक्रिया में कोई समीकरण समाधान शामिल है?

Answer 1

quadraticCurveTo ड्रॉ एक quadratic Bézier curve: और यहाँ इस विषय पर एक अच्छा ट्यूटोरियल, चित्र के साथ पूरा हो गया है।

वक्र पर सूत्रों किसी भी स्थिति (0 से 1 तक) पर एक बिंदु के निर्देशांक की गणना करने के

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 

जहां (x1, y1) है प्रारंभिक बिंदु, (x2, y2) नियंत्रण बिंदु है और (x3, y3) अंत बिंदु है।

तो, जावास्क्रिप्ट में तब्दील हो कि, हम

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) 
    }; 
} 

आप, वहाँ getQuadraticCurvePoint शुरू, अंत और नियंत्रण अंक पारित आधे रास्ते पद के लिए 0.5 के साथ-साथ हैं की तरह कुछ के साथ खत्म, आप एक मिलना चाहिए एक्स और वाई निर्देशांक के साथ वस्तु।

अस्वीकरण - मैंने कोड का परीक्षण नहीं किया है, इसलिए आपका माइलेज भिन्न हो सकता है, लेकिन यह सही लगता है। ;)

संपादित करें: मैंने यहां एक कोड में कोड का परीक्षण किया। http://jsfiddle.net/QA6VG/

Answer 2

यहां एक पृष्ठ है जो वर्गबद्ध समीकरण का वर्णन करता है और इसका समाधान है: wiki page। tutorial

Answer 3

एक संभव तरीका:

// 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 
    }; 
} 

और इसी jsfiddle: jsfiddle.net/pTccL/