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曲线，并且由于三次贝塞尔曲线是二阶Hermite曲线，我们可以在您的数据和贝塞尔曲线之间自由转换。

可以在Primer on Bezier curves上找到执行此操作的数学，并且特别针对此问题，我们可以将有序[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）

在浏览器画布上绘制hermite曲线（javascript）

2 个答案: