贝塞尔曲线路径上移动的物体上 [英] Move an object on on a Bézier curve path

问题描述

我想将我的形象从上到下一个贝塞尔曲线路径上，但我不能让我如何计算的x / y点和斜率从此路径。路径看起来像下面的图片：

我有开始，终点和两个控制点。

 路径path =新路径（）;
点s =新点（150，5）;
点CP1 =新的点（140，125）;
点CP2 =新的点（145，150）;
点E =新的点（200，250）;
path.moveTo（s.x，s.y）;
path.cubicTo（cp1.x，cp1.y，cp2.x，cp2.y，EX，EY）;
 

解决方案

这是公式是它简单地 [X，Y =（1-T）^ 3 * P0三次贝塞尔曲线+3（1-T）^ 2 * T * P1 + 3（1-T）T ^ 2 * P2 + T ^ 3 * P3 。与此可以通过评估方程求解每个点。在Java这个你能做到这一点是这样的：

  / * t为时间（0.0-1.0F值; 0表示开始1月底）* /
点CalculateBezierPoint（浮点T，S点，点C1，C2点，E点）
{
  浮U = 1  - 吨;
  浮TT = T * T;
  浮UU = U * U;
  浮UUU = UU * U;
  浮TTT = TT * T;

  点P =新的点（s.x * UUU，s.y * UUU）;
  p.x + = 3 * UU * T * c1.x;
  p.y + = 3 * UU * T * c1.y;
  p.x + = 3 * U * TT * c2.x;
  p.y + = 3 * U * TT * c2.y;
  p.x + = TTT * e.x;
  p.y + = TTT * e.y;

  返回磷;
}
 

所以，如果你想移动精灵沿着路径，那么你会简单地从0值设置吨价 - 1，具体取决于你想多远下来的路径是。例如：

  INT percentMovedPerFrame = 1; //将完成路径100帧
INT currentPercent = 0;
更新（）{
   如果（currentPercent＆小于100）{
      this.pos = CalculateBezierPoint（currentPercent / 100.0f，this.path.s，this.path.c1，this.path.c2，this.path.e）;
      currentPercent + = percentMovedPerFrame
   }
}
 

I want to move my image on a Bézier curve path from top to bottom but I can't get how can I calculate x/y points and slope from this path. The path looks like the following image:

I have start points, end points and two control points.

Path path = new Path(); 
Point s = new Point(150, 5); 
Point cp1 = new Point(140, 125); 
Point cp2 = new Point(145, 150); 
Point e = new Point(200, 250); 
path.moveTo(s.x, s.y); 
path.cubicTo(cp1.x, cp1.y, cp2.x, cp2.y, e.x, e.y); 

解决方案

This is a cubic Bézier curve for which the formula is simply [x,y]=(1–t)^3*P0+3(1–t)^2*t*P1+3(1–t)t^2*P2+t^3*P3. With this you can solve for each point by evaluating the equation. In Java this you could do it like this:

/* t is time(value of 0.0f-1.0f; 0 is the start 1 is the end) */
Point CalculateBezierPoint(float t, Point s, Point c1, Point c2, Point e)
{
  float u = 1 – t;
  float tt = t*t;
  float uu = u*u;
  float uuu = uu * u;
  float ttt = tt * t;

  Point p = new Point(s.x * uuu, s.y * uuu);
  p.x += 3 * uu * t * c1.x;
  p.y += 3 * uu * t * c1.y;
  p.x += 3 * u * tt * c2.x;
  p.y += 3 * u * tt * c2.y;
  p.x += ttt * e.x;
  p.y += ttt * e.y;

  return p;
}

So if you wanted to move a sprite along the path, then you would simply set the t value from a value of 0 - 1 depending on how far down the path you want to be. Example:

int percentMovedPerFrame = 1;// Will complete path in 100 frames
int currentPercent = 0;
update() {
   if (currentPercent < 100) {
      this.pos = CalculateBezierPoint(currentPercent / 100.0f, this.path.s, this.path.c1, this.path.c2, this.path.e);
      currentPercent += percentMovedPerFrame
   }
}

这篇关于贝塞尔曲线路径上移动的物体上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！