当前位置: 代码迷 >> 综合 >> js反向求贝塞尔曲线百分比t的方法
  详细解决方案

js反向求贝塞尔曲线百分比t的方法

热度:31   发布时间:2024-01-28 08:45:06.0

       贝塞尔曲线反向求t的方法在此使用分片迭代的方法,求到的t也只是一个在误差范围内的近似值,而不是该点对应的本身的值,分片迭代主要分为以下几个步骤:

1、将t的范围0~1,分为若干份,遍历,

2、然后将t带入贝塞尔公式中,求出该t时贝塞尔曲线的点的坐标

3、判断该点和代入点的距离,在误差范围内则返回该t

在此使用三次贝塞尔曲线做个例子:

(1)、三次贝塞尔曲线求点的坐标

function threeOrderBezier(t, p1, cp1, cp2, p2) {//参数分别为t,起始点,两个控制点和终点var [x1, y1] = p1,[cx1, cy1] = cp1,[cx2, cy2] = cp2,[x2, y2] = p2;var x =x1 * (1 - t) * (1 - t) * (1 - t) +3 * cx1 * t * (1 - t) * (1 - t) +3 * cx2 * t * t * (1 - t) +x2 * t * t * t,y =y1 * (1 - t) * (1 - t) * (1 - t) +3 * cy1 * t * (1 - t) * (1 - t) +3 * cy2 * t * t * (1 - t) +y2 * t * t * t;return [x, y];
}

(2)、贝塞尔曲线求t

function getBezierT(p1, cp1, cp2, p2, p) {var [xp, yp] = p; //准备代入求t的点var t = 0;for (var i = 0; i < 1000; i++) {var point = threeOrderBezier(t, p1, cp1, cp2, p2); //根据二次贝塞尔曲线公式求pointvar distance = Math.sqrt(Math.pow(xp - point[0], 2) + Math.pow(yp - point[1], 2));if (distance < 0.01) {// 判断point和p点的距离是否在误差范围之内return t; //返回误差范围内的t}t += 0.001;}return false;
}

所以,贝塞尔曲线反向求t是近似值,不是准确值。

  相关解决方案