折線轉曲線

寫在前面

這個東西其實是有價值的東西。因為在軟體模擬、數學方程可視化、流體模擬、數據可視化等等方面都有其用武之地。

如水的模擬：

心形函數方程轉圖像

線性報表

其原理都是通過三次貝塞爾曲線將有限個數的點平滑化。

問題建模

已知若干個點，繪制出該點連接的曲線。

<canvas width="480" height="480"></canvas>
<script>
    function drawPath(path){
        //實現
    }
    
    drawPath([{ x: 50, y: 50 }, { x: 200, y: 100 }, { x: 250, y: 50 }, { x: 350, y: 150 }, { x: 370, y: 100 }, { x: 570, y: 200 }])
</script>

這里實驗平台使用瀏覽器環境，即Canvas相關API以及javascript語言。

這里canvas的上下文對象擁有了bezierCurveTo方法，故免去了自己實現bezierCurveTo的一些事情。

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

實現圖解

實現目標

具體過程

代碼

Vector2，一般用來表示向量，但有的時候也用來當作點來進行一計算。

var Vector2 = function(x, y) {
        this.x = x;
        this.y = y;
}
Vector2.prototype = {
    "length": function () {
        return Math.sqrt(this.x * this.x + this.y * this.y);
    },
    "normalize": function () {
        var inv = 1 / this.length();
        return new Vector2(this.x * inv, this.y * inv);
    },
    "add": function (v) {
        return new Vector2(this.x + v.x, this.y + v.y);
    },
    "multiply": function (f) {
        return new Vector2(this.x * f, this.y * f);
    },
    "dot": function (v) {
        return this.x * v.x + this.y * v.y;
    },
    "angle": function (v) {
        return Math.acos(this.dot(v) / (this.length() *v.length())) * 180 / Math.PI;
    }
}

其中
length求向量長度

normalize轉單位向量

add向量疊加

multiply向量翻倍

dot內積

angle方法用來求兩個向量的夾角

核心方法，根據path上的點，求出所有貝塞爾曲線控制點。

function getControlPoint(path) {
    var rt = 0.3;
    var i = 0, count = path.length - 2;
    var arr = [];
    for (; i < count; i++) {
        var a = path[i], b = path[i + 1], c = path[i + 2];
        var v1 = new Vector2(a.x - b.x, a.y - b.y);
        var v2 = new Vector2(c.x - b.x, c.y - b.y);
        var v1Len = v1.length(), v2Len = v2.length();
        var centerV = v1.normalize().add(v2.normalize()).normalize();
        var ncp1 = new Vector2(centerV.y, centerV.x * -1);
        var ncp2 = new Vector2(centerV.y * -1, centerV.x);
        if (ncp1.angle(v1) < 90) {
            var p1 = ncp1.multiply(v1Len * rt).add(b);
            var p2 = ncp2.multiply(v2Len * rt).add(b);
            arr.push(p1, p2)
        } else {
            var p1 = ncp1.multiply(v2Len * rt).add(b);
            var p2 = ncp2.multiply(v1Len * rt).add(b);
            arr.push(p2, p1)
        }
    }
    return arr;
}

Demo

點我點我