在瀏覽器畫布上繪制hermite曲線（javascript）

Question

我試圖在畫布瀏覽器上繪制隱士曲線。 厄米特曲線用2點和2個導數定義。

Point1X = 71
Point1Y = 165
Deriv1X = -12
Deriv1Y = 2
Point2X = 210
Point2Y = 153
Deriv2X = 108
Deriv2Y = 0

我可以在畫布上畫出貝塞爾曲線。 有沒有什么方法可以將hermite曲線的點和推導轉換為貝塞爾曲線，這樣我就可以在畫布上繪制它？

還有另一種選擇，我可以在瀏覽器上繪制hermite曲線嗎？

感謝幫助。

Answer 1

Canvas2d不支持任意Hermite樣條，但它確實支持三次Bezier曲線，並且由於三次Beziers是二階Hermite曲線，我們可以在您的數據和Bezier曲線之間自由轉換。

可以在Bezier曲線上的這個Primer上找到這樣做的數學，特別是對於這個問題，我們可以將有序的[p1，d1，p2，d2]的Hermite點轉換為：

Hermite points [p1,d1,p2,d2] = Bezier [p1, (p1 + d1/(2*t)), (p2 - d2/(2*t)), p2]

注意， t值是曲線張力並且控制每個點處的曲率順序（張力越高，沿着曲線上點附近的曲線的曲率變化率越高），在這種情況下簡單地為1 。

（沒有張力值，您的四個坐標實際上定義了平面上的沙漏六邊形區域，而不是單個曲線，因為方向向量不能保證是真正的切線;僅僅是表示行進方向的向量。這些值定義的區域由一側的{start，end}線界定，沿着開始和結束的行進方向具有無限延伸的邊界。

因此，您可以在畫布上的畫布上繪制任何Hermite曲線，使用Canvas2d API繪制三次貝塞爾曲線：

// Hermite data
var p1 = ..., d1 = ..., p2 = ..., d2 = ...;
var cmpoints = [p1.x, p1.y, d1.x, d1.y, p2.x, p2.y, d2.x, d2.y];

// Bezier data
var tension = 1;
var tensionFactor = 2 * tension;
var bpoints = [
  p1.x,
  p1.y,
  p1.x + d1.x/tensionFactor,
  p1.y + d1.y/tensionFactor,
  p2.x - d2.x/tensionFactor,
  p2.y - d2.y/tensionFactor,
  p2.x,
  p2.y
]

// Draw code (where we assume you already
// have your canvas context as "ctx")
ctx.beginPath();
ctx.moveTo.apply(bpoints.slice(0,2));
ctx.bezierCurveTo.apply(bpoints.slice(2);
ctx.stroke();

Answer 2

立方Hermite曲線（由C（0），C'（0），C（1）和C'（1）定義）和三次貝塞爾曲線（由P0，P1，P2和P3定義）可以相互關聯通過

C（0）= P0，
C（1）= P3，
C'（0）= 3（P1-P0），
C'（1）= 3（P3-P2）

因此，您可以找到控制點

P0 = C（0），
P1 =（1/3）* C'（0）+ P0，
P2 = P3-（1/3）* C'（1），
P3 = C（1）