貝塞爾曲線計算

我努力工作，一個簡單的貝塞爾曲線，但我只是不明白的數學背後，如果有人可以給我解釋一下這個簡單的貝塞爾曲線這將是真棒:)貝塞爾曲線計算

我們有

point1 
X: 0 
Y: 0 

point2 
X: 100 
Y: 100 

control point1 
X: 0 
Y: 100

所以基本上我們有從左上角開始，將獲得由左到100×100像素的正方形的右下角的頂部對角線的線，但現在我想嘗試和拉那線在X位置0和Y位置100的控制點，有人可以向我解釋發生在這裏的簡單數學，如果可能的話，可以用我的值顯示計算:)。

謝謝

P.S.一個基本的圖片

enter image description here

UPDATE

下面是用方程

canvasHolder = document.getElementById('canvas'); 
canvas = canvasHolder.getContext('2d'); 

var deltaT = 0.10; 
var point1 = new Point(300,300); 
var point2 = new Point(400,400); 
var controlPoint1 = new Point(100,200); 
//Bezier cruve 
for(var i = 0; i < 10; i++) 
{ 
    var t = (i/10) * 0.1; 
    var xPos = (1.0 * - t*t) * point1.x + 2.0 * (1 - t) * t * controlPoint1.x + t * t * point2.x; 
    var yPos = (1.0 * - t*t) * point1.y + 2.0 * (1 - t) * t * controlPoint1.y + t * t * point2.y; 
    console.log("xPos = " + xPos + ", yPos = " + yPos); 
    var particle = new Particle("circle", xPos, yPos, 5, "#FF0000", "#333333"); 
    particles[i] = particle; 
}

在這裏我簡單的JavaScript代碼爲

xPos = 0, yPos = 0 bezierCurve.js:35 
xPos = 1.9900000000000004, yPos = 3.970000000000001 bezierCurve.js:35 
xPos = 3.9600000000000004, yPos = 7.880000000000001 bezierCurve.js:35 
xPos = 5.909999999999999, yPos = 11.729999999999999 bezierCurve.js:35 
xPos = 7.840000000000001, yPos = 15.520000000000001 bezierCurve.js:35 
xPos = 9.75, yPos = 19.25 bezierCurve.js:35 
xPos = 11.639999999999997, yPos = 22.919999999999998 bezierCurve.js:35 
xPos = 13.509999999999996, yPos = 26.529999999999998 bezierCurve.js:35 
xPos = 15.360000000000003, yPos = 30.080000000000005 bezierCurve.js:35 
xPos = 17.190000000000005, yPos = 33.57000000000001

任何理由在輸出爲什麼我得到這個結果

編輯，

其確定我這樣做

var xPos = (1.0 * - t*t) * point1.x + 2.0 * (1 - t) * t * controlPoint1.x + t * t * point2.x;

當它是這個

var xPos = (1.0 - t*t) * point1.x + 2.0 * (1 - t) * t * controlPoint1.x + t * t * point2.x;

來源

2014-02-22 Canvas

您是否希望繪製曲線或沿其移動物體？ – Nikki

移動一個對象一段時間，我對缺乏反應表示歉意，一直非常忙碌，並且在工作中如此:(但歡呼所有答案，我會深入瞭解今晚 – Canvas

貝塞爾曲線的參數曲線。這意味着您將有2個方程：1爲曲線上的x座標，另一個爲曲線上的y座標。

在這種情況下，您正在使用二次貝塞爾。對於quadratic beziers的公式爲：

X（t）=（1.0 - 噸^ 2）* + p0.x 2.0 *（1 - T）* T * p1.x + T^2 * p2.x ; （t）=（1.0-t^2）* p0.y + 2.0 *（1-t）* t * p1.y + t^2 * p2.y;其中，

在這種情況下，p0是起點，p1是控制點，p2是終點。

t在曲線上從0變化到1。因此，要使用標準線條繪製功能繪製它，您需要執行以下操作：

float numDivisions = 100.0; // <- You need to decide what this value should be. See below 
float t; 
float deltaT = t/numDivisions; 
MoveTo (p0.x, p0.y); 
for (t = 0; t <= 1.0; t += deltaT) 
{ 
    x = (1.0 - t*t) * p0.x + 2.0 * (1 - t) * t * p1.x + t * t * p2.x; 
    y = (1.0 - t*t) * p0.y + 2.0 * (1 - t) * t * p1.y + t * t * p2.y; 
    LineTo (x, y); 
}

numDivisions將控制曲線的分辨率。如果你只有3個分區，你會得到起點，中間有1個點（參數地說）和終點。如果你使用10000分，你可能會得到比你需要的更多。經驗法則是，連接點的直線總是比實際曲線長，所以你永遠不需要使用大於該點的分割點。（您可以使用點之間的歐幾里得距離。）

來源

2014-02-23 00:13:49 user1118321

因此，如果我們有P0 x：0 ，y：0，P1 x：0 y：100和P2 x：100 y：100，如果我們有numVidivisions = 10，我們會去for循環10次，所以對於第二次迭代T = 0.1，是否是正確的（x）=（1.0-0.1 * 0.1）* 0 + 2.0 *（1-0.1）* 0.1 * 0 + 0.1 * 0.1 * 0.1 * 100） – Canvas

只做了一些簡單的測試，對我給出了正確的結果:)我只是將t設置爲0.5，並且想要看看x是25還是y是75，實際上它是:)爲幫助而歡呼 – Canvas

但是很快如果我想添加5個控制點？ – Canvas

可以導出參數方程用於從所述幾何表示貝塞爾曲線：

(a)--A-----(c) 
      x \ 
       C 
       \ 
        \ 
        (b)

繪製從A-> C->線b

由點細分從a->c線甲，其中甲 =噸 *（ç - 一個）+ 一個，即噸從單元的朝向Ç（0 < =噸 < = 1）。使用相同比率t，從c朝向b前進，相同的單位（點C）。

（遞歸地）細分A-> C到的噸和1-叔段，將所述點X在分流點。這是位於貝塞爾曲線的真正點。

可以使用相同的程序生成三次貝塞爾曲線 - 爲該過程再增加一步。

求和：（A = {AX，AY}），A = {AX，AY}）等

A = (c-a)*t + a = { cx-ax * t + ax, cy-ay * t + ay } 
    B = (b-c)*t + c = { bx-cx * t + cx, by-cy * t + cy }  
    x = (C-A)*t + A = { Cx-Ax * t + Ax, Cy-Ay * y + Ay }

（注意，如果一個= {AX，AY，AZ}即，3D點，相同的原理成立）

現在可以組合這些公式以產生Cx，Cy，[Cz]的閉合形式方程作爲二次函數t和常數ax，ay，cx，cy， bx，由，如在user1118321的第一個答案中。

來源

2014-02-23 09:42:34

貝塞爾曲線計算

回答

相關問題