php image 平滑曲线,JavaScript折线转化为平滑曲线的一种方案
在前端的各种图表框架中，经常会有将一段折线平滑的需求，不仅能给用户带来一种柔和的感觉，还能美化界面，让折线看起来没那么生硬。这篇文章就来介绍一种折线平滑化的一种方案。
基础知识–三次贝塞尔曲线
在前端，能有用到曲线的地方，也就在绘图元素canvas中了。canvas提供了原生的两种绘制曲线的方法，二次贝塞尔曲线和三次贝塞尔曲线。本文介绍的这种方案便采用三次贝塞尔曲线来完成。
熟悉PhotoShop等绘图软件的朋友都知道，在PS中有一个工具叫钢笔工具，它是专门用来绘制曲线的。下面是一段用PS绘制出来的曲线
可以看到，这段曲线除了起点和终点之外，还有两个控制点A、B，更改他们的位置能相应的更改这段曲线的形状。
关于其中具体的计算方法及曲线的生成过程，可以参考文章：http://www.cnblogs.com/hnfxs/p/3148483.html
这里放一个文中生成曲线的gif图
这个图中，P0为起点，P3为终点，P1、P2分别是曲线的两个控制点，红色线条是生成的曲线，其他的都是辅助线。
如上，其实不算是本文的重点内容，关于贝塞尔曲线，你只需记住以下几个重要特征：
1、一段三次贝塞尔曲线由四个点控制生成：起点、终点和两个控制点；
2、起点P0与控制点P1的连线与曲线相切，终点P3与控制点P2的连线也与曲线相切；
3、图中每条辅助线段都被一个点分为两段，且每条辅助线上两段的比例都是相同的。
折线平滑原理
在了解了三次贝塞尔曲线的原理之后，折线平滑的原理是很容易理解的。
在上面的gif图中，我们新增一个点P6，以及P3的另一个控制点P4，P6的控制点P5。
那么，从P0到P3，再从P3到P6，这之间的直线相连，也就构成了一段折线，我们的任务便是使P3至P6这段直线也曲线化。
并且为了保证两段曲线的连贯性，P3至P6这段曲线起点的切线必须与上一段曲线终点的切线共线。
有了以上这个分析，我们假设P4为P3的控制点，P5为P6的控制点，那么我们最终的任务便是寻找这两个控制点P4和P5。
所以任务最终化解为，只需要保证P2、P3、P4这三点之间的连线共线即可。
为了讨论的方便，在上图中，我们称
P0、P3、P6为折线的顶点；
P0也叫折线的起点，P6也叫折线的终点；
P1、P2、P4、P5都称为控制点；
可以看出，起点和终点只有一个控制点，其他顶点都有两个控制点。
有了如上的分析和假设，下面给出折线平滑化的一种方案：
1、任意顶点与控制点的连线始终平行于x轴；
2、控制点与顶点的距离，根据顶点的相邻顶点在x轴方向上的距离乘以某个系数来确定；
3、起点和终点的控制点为其本身；
这个方案的大致意思就是下面这张图了
图中A、B、C、D为4个顶点，P0、P1、P2、P3、P4、P5为控制点，A为起点、D为终点。
方案强制控制点的连线平行于X轴，这样一来就保证了控制点与顶点的连线能够共线，再根据三次贝塞尔曲线的原理，就能将类似于上面这样的折线ABCD平滑化了。
方案的实现
看了这么多理论知识，我估计作为读者朋友的你早就腻了，脑子是不是不够用了啊？没关系，下面我就把我写好的代码放出来。
/**
* 绘制平滑的曲线
* @param pointList {Ycc.Math.Dot[]} 经过转换后的舞台绝对坐标点列表
*/
Ycc.UI.BrokenLine.prototype._smoothLineRender = function (pointList) {
// 获取生成曲线的两个控制点和两个顶点，N个顶点可以得到N-1条曲线
var list = getCurveList(pointList);
// 调用canvas三次贝塞尔方法bezierCurveTo逐一绘制
this.ctx.beginPath();
for(var i=0;i
this.ctx.moveTo(list[i].start.x,list[i].start.y);
this.ctx.bezierCurveTo(list[i].dot1.x,list[i].dot1.y,list[i].dot2.x,list[i].dot2.y,list[i].end.x,list[i].end.y);
}
this.ctx.stroke();
/**
* 获取曲线的绘制列表，N个顶点可以得到N-1条曲线
* @return {Array}
*/
function getCurveList(pointList) {
// 长度比例系数
var lenParam = 1/3;
// 存储曲线列表
var curveList = [];
// 第一段曲线控制点1为其本身
curveList.push({
start:pointList[0],
end:pointList[1],
dot1:pointList[0],
dot2:null
});
for(var i=1;i
var cur = pointList[i];
var next = pointList[i+1];
var pre = pointList[i-1];
// 上一段曲线的控制点2
var p1 = new Ycc.Math.Dot(cur.x-lenParam*(Math.abs(cur.x-pre.x)),cur.y);
// 当前曲线的控制点1
var p2 = new Ycc.Math.Dot(cur.x+lenParam*(Math.abs(cur.x-next.x)),cur.y);
// 上一段曲线的控制点2
curveList[i-1].dot2 = p1;
curveList.push({
start:cur,
end:next,
dot1:p2,
dot2:null
});
}
// 最后一段曲线的控制点2为其本身
curveList[curveList.length-1].dot2=pointList[pointList.length-1];
return curveList;
}
};
上面代码中的Ycc.UI是我框架的一个全局变量，不用理会。
重点关注函数getCurveList即可。看不懂的朋友多琢磨琢磨吧，明白了原理，代码实现很简单。
最后上一个示例链接：
结尾总结
最近工作忙，小站更新频率低，这篇文章年前起的头，现在才来完善，大伙见谅！
打赏作者
xiaohei
微信支付
支付宝