2d贝塞尔曲线ts递归实现算法

最新推荐文章于 2024-07-25 03:37:23 发布

原创最新推荐文章于 2024-07-25 03:37:23 发布 · 663 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #贝塞尔曲线 #游戏开发

Ts 同时被 3 个专栏收录

24 篇文章

订阅专栏

小游戏

7 篇文章

订阅专栏

数据结构与算法

6 篇文章

订阅专栏

该博客主要介绍了如何获取贝塞尔曲线上的点的集合。通过`getCurvePointsInNum`方法，可以根据给定点的集合和需求的点数生成平滑的曲线路径。此算法适用于前端开发中的图形绘制和动画制作，例如SVG路径、CSS动画等场景。

export default class BezierCurve {

    /**
     * 获取贝塞尔曲线的点的集合
     * @param points 点的集合, 至少包含起点和终点
     * @param num 想要生成多少点
     * @returns 
     */
    public static getCurvePointsInNum(points:Array<any>, num:number): Array<any> {
        let result:Array<any> = new Array<any>();
        for(let i:number = 0; i < num; i++) {
            let t:number = i / (num - 1);
            let point = this.getKeyPoint(points, t);
            result.push(point);
        }
        return result;
    }

    public static getKeyPoint(points: Array<any>, t: number): any {
        if (points.length > 1) {
            let dirs: Array<any> = new Array<any>();
            for (let i: number = 0; i < points.length - 1; i++) {
                dirs.push({
                    x: points[i + 1].x - points[i].x,
                    y: points[i + 1].y - points[i].y
                });
            }
            let points2: Array<any> = new Array<any>();
            for (let j: number = 0; j < dirs.length; j++) {
                points2.push({
                    x: points[j].x + dirs[j].x * t,
                    y: points[j].y + dirs[j].y * t
                });
            }
            return this.getKeyPoint(points2, t);
        } else {
            return { x: points[0].x, y: points[0].y };
        }
    }
}