两种折线平滑方案

时间 2019-11-07

标签两种折线平滑方案繁體版

原文原文链接

写在前面

平滑折线的场景仍是蛮多的，如软体模拟、数学方程可视化、流体模拟、数据可视化、屏保程序curvejs等等方面都有其用武之地。如水的模拟:javascript

心形函数方程转图像:html

由于方程的输入和输出是无限多个，须要绘制方程图像能够只绘制其中一部分点，而后再smooth点链接起的折线。java

再好比线性报表中的折线smooth化:git

本文将使用两种方式将折线平滑化，并对比其优劣点:github

经过三次贝塞尔曲线将有限个数的点平滑化
经过二次贝塞尔曲线将有限个数的点平滑化

问题建模

已知若干个点，绘制出该点链接的曲线。canvas

<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);复制代码

三次贝塞尔平滑图解

实现目标ui

具体过程
this

代码

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计算量更大（三次贝塞尔平滑方案），不然计算量小（二次贝塞尔平滑方案）

关键要看平滑后的做用，若是只是为了视觉效果可使用二次贝塞尔平滑方案，若是拥有用户交互碰撞检测，可使用三次贝塞尔平滑方案。