[英]Trying to find length of a bezier curve with 4 points
我已经找到了大约1000个这个问题的答案,但我不能使用它们,因为我在曲线上使用了4个控制点。
那就是说,我在这里偶然发现了这个人:
double BezierArcLength(point2d p1, point2d p2, point2d p3, point2d p4)
{
point2d k1, k2, k3, k4;
k1 = -p1 + 3*(p2 - p3) + p4;
k2 = 3*(p1 + p3) - 6*p2;
k3 = 3*(p2 - p1);
k4 = p1;
q1 = 9.0*(sqr(k1.x) + sqr(k1.y));
q2 = 12.0*(k1.x*k2.x + k1.y*k2.y);
q3 = 3.0*(k1.x*k3.x + k1.y*k3.y) + 4.0*(sqr(k2.x) + sqr(k2.y));
q4 = 4.0*(k2.x*k3.x + k2.y*k3.y);
q5 = sqr(k3.x) + sqr(k3.y);
double result = Simpson(balf, 0, 1, 1024, 0.001);
return result;
}
它看起来像是一个完美的解决方案,但那个开始部分对我来说完全是混乱的:
k1 = -p1 + 3*(p2 - p3) + p4;
k2 = 3*(p1 + p3) - 6*p2;
k3 = 3*(p2 - p1);
k4 = p1;
我究竟应该对二维对象进行加,减,乘等操作(我认为point2d是一个像{x: 0, y: 0}
这样的对象结构)? 我觉得很愚蠢,但这是阻止我实际实现这种怪物的唯一因素。
FWIW,我正在使用这个等式来标准化实体在游戏中穿越曲线时的速度。 如果你知道一个更好的办法,我会全力以赴。
以下是如何以均匀的速度遍历立方贝塞尔曲线
没有一个简单的公式可以得到沿着三次贝塞尔曲线的均匀长度段(意味着甚至是弧长段)。 所涉及的是沿曲线计算许多点,然后使用插值将每个点“轻推”成大致等距。
没有你必须获得数学博士学位,我几乎可以帮你。
首先使用公式计算从t = 0到t = 1的曲线上的x / y点,其中t = 0表示曲线的起点,t = 1表示曲线的终点。 这是常见的公式:
// calc the x/y point at t interval
// t=0 at startPt, t=1 at endPt
var x=CubicN(t,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
var y=CubicN(t,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
// cubic helper formula at t interval
function CubicN(t, a,b,c,d) {
var t2 = t * t;
var t3 = t2 * t;
return a + (-a * 3 + t * (3 * a - a * t)) * t
+ (3 * b + t * (-6 * b + b * 3 * t)) * t
+ (c * 3 - c * 3 * t) * t2
+ d * t3;
}
如果计算出足够的间隔,比如100个间隔(每个循环t + = .01),那么你将获得一个非常好的曲线近似值。
这意味着如果用线连接100个点,结果看起来非常像一个三次贝塞尔曲线。
但是你还没完成!
上面计算的一系列x / y点的弧距彼此不均匀。
一些邻近的点靠近在一起,一些相邻的点相距较远。
要计算均匀分布的点数:
结果:您可以使用这些等距点来遍历曲线。
附加细化:这将导致沿着Bezier路径的视觉上平滑移动。 但如果你想要更加平滑,只需计算超过100点 - 更多点==更平滑。
二维对象或Point2D只是一个Vector,而Vector Arithmetic在数学中是明确定义的。 例如:
k*(x,y) = (k*x, k*y)
-(x,y) = (-1)*(x,y)
(x1,y1) + (x2,y2) = (x1+x2, y1+y2)
这些是计算k1
, k2
, k3
和k4
所需的所有公式
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.