可视化n次贝塞尔曲线及过程动画演示

1,013 阅读9分钟
原文链接: www.cnblogs.com

先抛一个动画模拟的一个例子,吊一吊Xing趣(4次)

不够强?再来一个

这样子,满足你。demo说明

git仓库地址示例

  • 我眼睛花,没看懂,能暂停不了?
    • 可以控制动画暂停与继续。(供大家清楚地时刻看到每一帧)
  • 我研究,先不追求性能,能控制播放时间不了?
    • 可以是setInterval代替requestAnimationFrame控制每一帧的时间(已经注释,大家可以注释开控制时间)

起因

研究css中提供了2次、3次bezier,但是没有对n次bezier实现。对n次的实现有很大兴趣,所以就用js的canvas搞一下,顺便把过程动画模拟了一下。 投入真实生产之中,偏少。

好像很吊的样子,怎么实现的?------------------------------------------------------------------------1:只画一个bezier曲线,看我BB

看我是这样理解bezeir公式

最主要理解bezier曲线的公式,看我抄百度的贝塞尔公式图,看抄

  • 线的个数 辅助线的个数
    • n个节点(n>2),
    • 总线数:(n-1)+(n-2)+...+1,公差为1等差数列求和,S=(1+n-1)(n-1)/2=n(n-1)/2
    • 中间辅助线(包含最后一条):n*(n-1)/2-(n-1)
    • 假如:2个节点,总1条 0辅助
    • 假如:3个节点,总3条 1辅助
    • 假如:4个节点,总6条 3辅助
    • 假如:5个节点,总10条 6辅助
  • 我是这样子理解 t的(自变量t的范围)
    • 不论几次贝塞尔,t从0->1[0,1],这个过程:
    • 假如:描了100个点,就是把范围1分成100份 ,每份0.01
    • 假如:描了1000个点,就是把范围1分成100份 ,每份0.001

组合:数学偏low的人是组合哪个符号,表示不明白,举爪。

  • 两个圆括号(n i)是什么?是组合吗,组合不C n i吗。我也是数学偏low的,别墨迹,直接上解释 知乎大法好,组合表示法
  • 看我抄百度数学组合公式
  • 阶乘是啥,我不知道~

    //组合
    function C(n, i) {
    return f(n) / f(i) / f(n - i)
    }
    //阶乘公式 n!
    //阶乘 factorial 
    function f(n) {
    if (n < 0) {
        return -1
    } else if (n === 0 || n === 1) {
        return 1
    } else {
        return (n * f(n - 1))
    }
    }

控制点固定,t为【0,1】的一个值的时候,获取bezier曲线的一个点的x y坐标

//曲线上的一个点,分别求出x,和y
//points确定系数
//t是自变量,这里获取一个点的时候,需要t固定,画线的时候再赋值[0,1],分100份的话,每次t差距0.01,循环t
//公式中需要组合
function getOnePointXY(points, t) {
       return {
                x: Sigmar('x', points, t),
                y: Sigmar('y', points, t)
       }
}
//x或者y方向上的坐标,bezier曲线求和
function sigmar(direction, points, t) {
    var result = 0
    //n+1个节点,是n次bezier曲线
    let n = points.length - 1
    for (let [i, { x, y }] of points.entries()) {
        var A = C(n, i)
        var P = direction === 'x' ? x : direction === 'y' ? y : x//不传'x' 'y'默认x方向
        var t1 = Math.pow(1 - t, n - i)
        var t2 = Math.pow(t, i)
        result += A * P * t1 * t2
    }
    return result
}

点都确定了,开始canvas

 var controlPoints = [{ x: 100, y: 500 }, { x: 150, y: 400 }, { x: 600, y: 300 }, { x: 400, y: 150 }]

        //一条bezier曲线上有多少个点,
        //分100份的话,每次t差距0.01,循环。
        //todo,用户配置--点--暂停--嵌入动画里面
        var pointCount = 1000
        var allBezeirPoints = nbezeirCurve(controlPoints, pointCount)
        const pen = canvas.getContext('2d')
        pen.moveTo(allBezeirPoints[0].x, allBezeirPoints[0].y)
        //pen.moveTo(0, allBezeirPoints[0].y)
        
        for (let { x, y } of allBezeirPoints) {
            pen.lineTo(x, y)
        }
        pen.stroke()

        console.log(nbezeirCurve(controlPoints, pointCount))
        //得到n次bezier曲线的pointCount个数个点数组
        function nbezeirCurve(controlPoints, pointCount, t = 0) {
            var step = 1 / pointCount//t->step++[0,1]
            var pointArr = []
            while (t < 1) {
                pointArr.push(getOnePointXY(controlPoints, t))
                t += step
            }
            return pointArr
        }

demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>bezeir by 李可</title>

</head>

<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script>
        var controlPoints = [{ x: 100, y: 500 }, { x: 150, y: 400 }, { x: 600, y: 300 }, { x: 400, y: 150 }]

        //一条bezier曲线上有多少个点,
        //分100份的话,每次t差距0.01,循环。
        //todo,用户配置--点--暂停--嵌入动画里面
        var pointCount = 1000
        var allBezeirPoints = nbezeirCurve(controlPoints, pointCount)
        const pen = canvas.getContext('2d')
        pen.moveTo(allBezeirPoints[0].x, allBezeirPoints[0].y)
        //pen.moveTo(0, allBezeirPoints[0].y)
        
        for (let { x, y } of allBezeirPoints) {
            pen.lineTo(x, y)
        }
        pen.stroke()

        console.log(nbezeirCurve(controlPoints, pointCount))
        //得到n次bezier曲线的pointCount个数个点数组
        function nbezeirCurve(controlPoints, pointCount, t = 0) {
            var step = 1 / pointCount//t->step++[0,1]
            var pointArr = []
            while (t < 1) {
                pointArr.push(getOnePointXY(controlPoints, t))
                t += step
            }
            return pointArr
        }

        //曲线上的一个点,分别求出x,和y
        //points确定系数
        //t是自变量,这里获取一个点的时候,需要t固定,画线的时候再赋值[0,1],分100份的话,每次t差距0.01,循环t
        //公式中需要组合
        function getOnePointXY(points, t) {
            return {
                x: Sigmar('x', points, t),
                y: Sigmar('y', points, t)
            }
        }
        //x或者y方向上的坐标,bezier曲线求和
        function Sigmar(direction, points, t) {
            var result = 0
            //n+1个节点,是n次bezier曲线
            let n = points.length - 1
            for (let [i, { x, y }] of points.entries()) {
                var A = C(n, i)
                var P = direction === 'x' ? x : direction === 'y' ? y : x//不传'x' 'y'默认x方向
                var t1 = Math.pow(1 - t, n - i)
                var t2 = Math.pow(t, i)
                result += A * P * t1 * t2
            }
            return result
        }
        //组合
        function C(n, i) {
            return f(n) / f(i) / f(n - i)
        }
        //阶乘 factorial 
        function f(n) {
            if (n < 0) {
                return -1
            } else if (n === 0 || n === 1) {
                return 1
            } else {
                return (n * f(n - 1))
            }
        }
    </script>
</body>

</html>
运行画 

现在你明白了画一个bezier如此简单,是否特别想怎么用动画模仿出来这个贝塞尔的过程?-------------2:动画模拟bezier曲线过程,继续看我BB

模拟动画的思路,那让我们继续想,怎么画这个动画呢?

....想来想去------>每一帧,把t的所有连线都画好。下一帧把上一帧的连线抹除后,再画t=t+0.01(这里分了100份,每份0.01)的的所有连线。
所有线,每一帧到底有多少线需要画?见下图。

针对每一帧:根据t
假使画5次贝赛尔曲线,先画4个线,(得到4个点,先画3个线),(得到3个点,再画2条)。
假使画4次贝赛尔曲线,先画3个线,(得到3个点,再画2条)。
假使画3次贝赛尔曲线,(画2条)。

画折线


        function drawBrokenLine(points, t = 1, lineColor = 'white', hasNode = true, nodeColor = 'white') {
            if (points.length >= 2) {
                for (var i = 0; i < points.length - 1; i++) {
                    var current = points[i]
                    var next = points[i + 1]
                    drawLine(current, next, lineColor)
                    hasNode && drawNode(current, nodeColor)
                }
                hasNode && drawNode(points[points.length - 1], nodeColor)
            }
            return getPercentPoints(points, t)
        }

动画每一帧中的2个技术点

t固定下,怎么得到上个折线中对应下次点坐标折线集合?看图说话。顺便看下代码

function getPercentPoints(points, t) {
    if (points.length <= 1) {
        return points
    }
    const perPoints = []
    var inx = 0
    while (inx < points.length - 1) {
        const current = points[inx]
        const next = points[inx + 1]
        var perPoint = {
            x: current.x + (next.x - current.x) * t,
            y: current.y + (next.y - current.y) * t
        }
        perPoints.push(perPoint)
        inx++
    }
    return perPoints
}

递归画折线

直到剩下 1个点时候,就是besier曲线上的值了

function drawframe(points, t) {
            var lineColors = getColors(points)
            canvas.width = canvas.width
            init(pen)
            //画第一折线
            var percentPoints = drawBrokenLine(points, t, 'white', true, 'yellow')
            var i = 0
            //循环画中间折线
            while (percentPoints.length > 1) {
                const currentColor = lineColors[++i]
                percentPoints = drawBrokenLine(percentPoints, t, currentColor, true, currentColor)
            }
            //循环画贝塞尔折(曲)线
            const bezeirPoints = getBezierPoints(controlPoints, step, t)
            drawBrokenLine(bezeirPoints, t, 'red', false)
        }

最后,要持久啊,给点颜色看看

给中间折线上上随机色啊,增加丢丢美感。 为显目,第一轮折线为白色,最后贝塞尔线确定为红色

最后的最后,有完没完?还没BB完?完了..,不行,不要砍我...我只是想上个示例demo.....运行大宝剑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>bezier by 李可</title>

</head>

<body>
    <canvas id="canvas" width="1000" height="600"></canvas>
    <br>
    <input type="button" id="btn1" value="绘制">
    <input type="button" id="btn2" value="清空">
    <input type="button" id="btn3" value="暂停">
    <script>     
function getPercentPoints(points, t) {
    if (points.length <= 1) {
        return points
    }
    const perPoints = []
    var inx = 0
    while (inx < points.length - 1) {
        const current = points[inx]
        const next = points[inx + 1]
        var perPoint = {
            x: current.x + (next.x - current.x) * t,
            y: current.y + (next.y - current.y) * t
        }
        perPoints.push(perPoint)
        inx++
    }
    return perPoints
}


function getBezierPoints(points, t, end = 1, start = 0) {
    var pointArr = []
    while (start <= end) {
        var node = getOneBezierPoint(points, start)
        pointArr.push(node)
        start += t
    }
    return pointArr
}

//曲线上的一个点,分别求出x,和y
//points确定系数
//t是自变量,这里获取一个点的时候,需要t固定,画线的时候再赋值[0,1],分100份的话,每次t差距0.01,循环t
//公式中需要组合
function getOneBezierPoint(points, t) {
    return {
        x: sigmar('x', points, t),
        y: sigmar('y', points, t)
    }
}
//x或者y方向上的坐标,bezier曲线求和
function sigmar(direction, points, t) {
    var result = 0
    //n+1个节点,是n次bezier曲线
    let n = points.length - 1
    for (let [i, { x, y }] of points.entries()) {
        var A = C(n, i)
        var P = direction === 'x' ? x : direction === 'y' ? y : x//不传'x' 'y'默认x方向
        var t1 = Math.pow(1 - t, n - i)
        var t2 = Math.pow(t, i)
        result += A * P * t1 * t2
    }
    return result
}
//组合
function C(n, i) {
    return f(n) / f(i) / f(n - i)
}
//阶乘 factorial 
function f(n) {
    if (n < 0) {
        return -1
    } else if (n === 0 || n === 1) {
        return 1
    } else {
        return (n * f(n - 1))
    }
}
    </script>
    <script>
        const controlPoints = []//{ x: 100, y: 500 }, { x: 150, y: 400 }, { x: 600, y: 300 }, { x: 400, y: 150 }

        const pen = canvas.getContext('2d')
        function init(pen) {
            pen.fillStyle = "#444"
            pen.fillRect(0, 0, canvas.width, canvas.height)
        }
        init(pen)

        canvas.onmousedown = function (e) {
            const point = { x: e.offsetX, y: e.offsetY }
            controlPoints.push(point)
            drawText(point, controlPoints.length)
            drawNode(point)
            drawLastLine(controlPoints)
        }
        //显示点击位置
        function drawText(point, inx, y = 10, font = 16) {
            pen.fillStyle = "#fff"
            pen.textAlign = 'end'
            pen.textBaseline = 'hanging'
            pen.font = `${font}px`//times
            pen.fillText(`${point.x}x${point.y}:${inx}`, 1000 - 20, inx === 1 ? y : (inx - 1) * font + y)

        }

        function drawLastLine(points) {
            //画最后两点连线 -折线
            var count = points.length
            var current = points[count - 2]
            var next = points[count - 1]
            if (count >= 2) {
                drawLine(current, next)
            }
        }
        function drawNode(point, nodeColor = 'white') {
            //画节点
            pen.beginPath()
            pen.strokeStyle = nodeColor
            pen.lineWidth = 2
            pen.arc(point.x, point.y, 8, 0, 2 * Math.PI)
            pen.stroke()
        }
        function drawLine(current, next, color = "white") {
            //画最后两点连线 -折线
            pen.beginPath()
            pen.strokeStyle = color
            pen.lineWidth = 2
            pen.moveTo(current.x, current.y)
            pen.lineTo(next.x, next.y)
            pen.stroke()
        }

        const pointCount = 100
        const step = 1 / pointCount//t->step++[0,1]
        //绘bezier曲线
        function drawBrokenLine(points, t = 1, lineColor = 'white', hasNode = true, nodeColor = 'white') {
            if (points.length >= 2) {
                for (var i = 0; i < points.length - 1; i++) {
                    var current = points[i]
                    var next = points[i + 1]
                    drawLine(current, next, lineColor)
                    hasNode && drawNode(current, nodeColor)
                }
                hasNode && drawNode(points[points.length - 1], nodeColor)
            }

            return getPercentPoints(points, t)
        }
        function getRandomColor() {
            var color = "#"
            for (let i = 0; i < 6; i++) {
                color += Array.from('0123456789abcdef')[Math.floor(16 * Math.random())]
            }
            return color
        }
        //n次,画n-1条折线
        var lineColors = []
        function getColors(points) {
            const len = points.length
            for (let i = 0; i < len - 1; i++) {
                lineColors.push(getRandomColor())
            }
            return lineColors
        }
        function drawframe(points, t) {
            var lineColors = getColors(points)
            canvas.width = canvas.width
            init(pen)
            var percentPoints = drawBrokenLine(points, t, 'white', true, 'yellow')
            var i = 0
            while (percentPoints.length > 1) {
                const currentColor = lineColors[++i]
                percentPoints = drawBrokenLine(percentPoints, t, currentColor, true, currentColor)
            }
            const bezeirPoints = getBezierPoints(controlPoints, step, t)
            drawBrokenLine(bezeirPoints, t, 'red', false)
        }

        var timer
        var state
        var runFlag = true
        function startBezier(t, recursive = false) {//iteration
            // timer = setInterval(() => {
            //     if (t <= 1) {
            //         drawframe(controlPoints, t)
            //         t += step
            //         state = t
            //     } else {
            //         clearInterval(timer)
            //         drawframe(controlPoints, 1)
            //         recursive && startBezier(0)
            //     }
            // }, 200)
            timer = requestAnimationFrame(function frame() {
                if (runFlag) {
                    if (t <= 1) {
                        drawframe(controlPoints, t)
                        t += step
                        state = t
                        requestAnimationFrame(frame)
                    } else {
                        cancelAnimationFrame(timer)
                        drawframe(controlPoints, 1)
                        recursive && startBezier(0)
                    }
                } else {
                    cancelAnimationFrame(timer)
                }
            })
            // const bezeirPoints = getBezierPoints(controlPoints, step, 0.5)
            // drawBrokenLine(bezeirPoints, 1, 'red')
        }
        btn1.onclick = function () {
            startBezier(0)
        }
        btn2.onclick = function () {
            controlPoints.splice(0, controlPoints.length)
            canvas.width = canvas.width
            // clearInterval(timer)
            runFlag = true
            init(pen)
        }
        var count = 0
        btn3.onclick = function () {
            if (++count % 2 === 1) {
                btn3.value = '继续'
                if (timer) {
                    //clearInterval(timer)
                    runFlag = false
                }
            } else {
                btn3.value = '暂停'
                console.log(state)
                runFlag = true
                startBezier(state)
            }
        }

    </script>
</body>

</html>
运行大保健 

真完了