javascript - 给定x三次方贝塞尔曲线的y坐标

这个问题非常类似于:Quadratic bezier curve: Y coordinate for a given X?。但这是立方的...

我正在使用getBezier函数来计算贝塞尔曲线的Y坐标。贝塞尔曲线始终在(0,0)处开始，并始终在(1,1)处结束。

我知道X值，所以我尝试将其作为百分比插入(我是白痴)。但这显然没有用。您能提供解决方案吗？这是一个白痴证明功能是必要的。喜欢:

function yFromX (c2x,c2y,c3x,c3y) { //c1 = (0,0) and c4 = (1,1), domainc2 and domainc3 = [0,1]
    //your magic
    return y;
}

最佳答案

由于问题是如此有限(函数x(t)是单调的)，我们可能可以避免使用一种非常便宜的解决方案-二进制搜索。

var bezier = function(x0, y0, x1, y1, x2, y2, x3, y3, t) {
    /* whatever you're using to calculate points on the curve */
    return undefined; //I'll assume this returns array [x, y].
};

//we actually need a target x value to go with the middle control
//points, don't we? ;)
var yFromX = function(xTarget, x1, y1, x2, y2) {
  var xTolerance = 0.0001; //adjust as you please
  var myBezier = function(t) {
    return bezier(0, 0, x1, y1, x2, y2, 1, 1, t);
  };

  //we could do something less stupid, but since the x is monotonic
  //increasing given the problem constraints, we'll do a binary search.

  //establish bounds
  var lower = 0;
  var upper = 1;
  var percent = (upper + lower) / 2;

  //get initial x
  var x = myBezier(percent)[0];

  //loop until completion
  while(Math.abs(xTarget - x) > xTolerance) {
    if(xTarget > x)
      lower = percent;
    else
      upper = percent;

    percent = (upper + lower) / 2;
    x = myBezier(percent)[0];
  }
  //we're within tolerance of the desired x value.
  //return the y value.
  return myBezier(percent)[1];
};

当然，这超出了您的约束范围，可能会破坏某些输入。

关于javascript - 给定x三次方贝塞尔曲线的y坐标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7348009/