兩種折線平滑方案

寫在前面

平滑折線的場景仍是蠻多的，如軟體模擬、數學方程可視化、流體模擬、數據可視化、屏保程序curvejs等等方面都有其用武之地。如水的模擬:

usage

心形函數方程轉圖像:

usage

由於方程的輸入和輸出是無限多個，須要繪製方程圖像能夠只繪製其中一部分點，而後再smooth點鏈接起的折線。

再好比線性報表中的折線smooth化:

usage

本文將使用兩種方式將折線平滑化，並對比其優劣點:

• 經過三次貝塞爾曲線將有限個數的點平滑化
• 經過二次貝塞爾曲線將有限個數的點平滑化

問題建模

已知若干個點，繪製出該點鏈接的曲線。

<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方法:

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);複製代碼

三次貝塞爾平滑圖解

實現目標

usage

具體過程

usage

代碼

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&Source

• 在線演示
• 源碼

二次貝塞爾平滑圖解

如上圖所示:

• 除了起點和終點，其他這線上的點全變成二次貝塞爾曲線上的控制點
• 除了起始線段和終點線段，其他線段的中點全變成二次貝塞爾曲線的起點和終點

代碼

這裏canvas的上下文對象擁有了quadraticCurveTo方法:

context.quadraticCurveTo(cpx,cpy,x,y);複製代碼

具體實現:

ctx.beginPath();
ctx.moveTo(points[0], points[1]);
for (let i = 2, len = points.length; i < len; i += 2) {
    if (i === points.length - 4) {
        ctx.quadraticCurveTo(points[i], points[i + 1], points[i + 2], points[i + 3]);
    } else {
        ctx.quadraticCurveTo(points[i], points[i + 1], (points[i] + points[i + 2]) / 2, ((points[i + 1] + points[i + 3]) / 2));
    }
}
ctx.stroke();複製代碼

Demo&Source

• 在線演示
• 源碼

兩種方案對比

• 三次貝塞爾平滑方案曲線通過折線上線段的起點和中點
• 二次貝塞爾平滑方案曲線不通過折線上線段的起點和中點
• 三次貝塞爾平滑方案計算量遠大於二次貝塞爾平滑方案
• 三次貝塞爾平滑方案在進行交叉或者碰撞檢測時顯得更加精確

• 二次貝塞爾平滑方案在進行交叉或者碰撞檢測時顯得不夠精確

  注意，這裏的碰撞檢測是指的與折線的每條線段是否碰撞來斷定是否與曲線碰撞。好比割繩子游戲裏的繩子，明顯使用三次貝塞爾平滑方案會帶來更好的用戶體驗，固然若是點的數量足夠多、點與點的間隔很小的狀況下，交叉或者碰撞檢測看上去就差異不大。其實上面總結了一大堆能夠提煉成一句話：

• 要想準確Smooth計算量更大（三次貝塞爾平滑方案），不然計算量小（二次貝塞爾平滑方案）

關鍵要看平滑後的做用，若是隻是爲了視覺效果可使用二次貝塞爾平滑方案，若是擁有用戶交互碰撞檢測，可使用三次貝塞爾平滑方案。