二次贝塞尔曲线:计算点 [英] Quadratic Bézier Curve: Calculate Points
问题描述
我想计算一个二次曲线上的点.要将其与HTML5的canvas元素一起使用.
I'd like to calculate a point on a quadratic curve. To use it with the canvas element of HTML5.
当我使用 quadraticCurveTo()
函数,我有一个源点,一个目标点和一个控制点.
When I use the quadraticCurveTo()
function in JavaScript, I have a source point, a target point and a control point.
我如何在创建的二次曲线上以t=0.5
在仅"知道这三个点的情况下计算一个点?
How can I calculate a point on the created quadratic curve at let's say t=0.5
with "only" knowing this three points?
推荐答案
使用二次Bézier公式,例如在Wikipedia页面上找到的
Use the quadratic Bézier formula, found, for instance, on the Wikipedia page for Bézier Curves:
在伪代码中,那是
t = 0.5; // given example value
x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;
p[0]
是起点,p[1]
是控制点,p[2]
是终点. t
是参数,从0到1.
p[0]
is the start point, p[1]
is the control point, and p[2]
is the end point. t
is the parameter, which goes from 0 to 1.
这篇关于二次贝塞尔曲线:计算点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!