美文网首页
js贝塞尔曲线算法,js贝塞尔曲线路径点

js贝塞尔曲线算法,js贝塞尔曲线路径点

作者: 凡凡的小web | 来源:发表于2018-12-26 15:00 被阅读0次

    //anchorpoints:贝塞尔基点

            //pointsAmount:生成的点数

        //return 路径点的Array

            function CreateBezierPoints(anchorpoints, pointsAmount) {

                var points = [];

                for (var i = 0; i < pointsAmount; i++) {

                    var point = MultiPointBezier(anchorpoints, i / pointsAmount);

                    points.push(point);

                }

                return points;

            }

            function MultiPointBezier(points, t) {

                var len = points.length;

                var x = 0, y = 0;

                var erxiangshi = function (start, end) {

                    var cs = 1, bcs = 1;

                    while (end > 0) {

                        cs *= start;

                        bcs *= end;

                        start--;

                        end--;

                    }

                    return (cs / bcs);

                };

                for (var i = 0; i < len; i++) {

                    var point = points[i];

                    x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));

                    y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));

                }

                return { x: x, y: y };

            }

    以上是计算高阶贝赛尔曲线所有点的方法,

    方法引用了引用公式

    一次、二次、三次贝塞尔曲线函数

    function onebsr(t, a1, a2) {

        return a1 + (a2 - a1) * t;

    }

    function twobsr(t, a1, a2, a3) {

        return ((1 - t) * (1 - t)) * a1 + 2 * t * (1 - t) * a2 + t * t * a3;

    }

    function threebsr(t, a1, a2, a3, a4) {

        return a1 * (1 - t) * (1 - t) * (1 - t) + 3 * a2 * t * (1 - t) * (1 - t) + 3 * a3 * t * t * (1 - t) + a4 * t * t * t;

    }

    参考 https://www.cnblogs.com/lxiang/p/4995255.html

    相关文章

      网友评论

          本文标题:js贝塞尔曲线算法,js贝塞尔曲线路径点

          本文链接:https://www.haomeiwen.com/subject/kqphlqtx.html