array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 贝塞尔曲线生成及测试 - 爱码网

玩过ps的同学,应该用过一个钢笔工具。

而钢笔产生的就是贝塞尔曲线。还有这里来体验一下:

https://myst729.github.io/bezier-curve/

 

Bezier曲线分为一次/二次/三次/多次贝塞尔曲线,之所以这么分是为了更好的理解其中的内涵。

一次贝塞尔曲线(线性Bezier),实际上就是一条连接两点的直线段。
二次贝塞尔曲线,就是两点间的一条抛物线,利用一个控制点来控制抛物线的形状。
三次贝塞尔曲线,则需要一个起点,一个终点,两个控制点来控制曲线的形状。
实例如下:在http://cubic-bezier.com/#.42,0,1,1的地方体验一下。

一阶曲线。

贝塞尔曲线生成及测试 

二阶的贝塞尔曲线是这样画出来的。

 

贝塞尔曲线生成及测试

 

而多阶的是这样的。

贝塞尔曲线生成及测试

 

 

那二阶的计算公式,其中 0<=t<=1。

  二阶的计算点的公式: P0*(1-t)^2 + 2*P1*t(1-t) + P2*t^2 =P,其中P0为起始点,P1为控制点,P2为终点。那我们用matlab仿真,代码如下:

%% 起始点
startx=1;
starty=1;
%% 终止点
endx=10;
endy=0;
%% 控制点
cont1x=5;
cont1y=1;
%% 生成曲线
pointnum=100;%步数
t=1/(pointnum-1);
for i=1:pointnum-1
    x= startx*(1-i*t)^2 + cont1x*2*i*t*(1-i*t) + endx*(i*t)^2;
    y= starty*(1-i*t)^2 + cont1y*2*i*t*(1-i*t) + endy*(i*t)^2;
    hold on;
    plot(x,y,'.');
end

plot(startx,starty,'*')
plot(endx,endy,'*')
plot(cont1x,cont1y,'*')

 

 四个点的话就是两个控制点 p1,p2,另外两个就是起点和终点p0,p3。

公式为: P = P0*(1-t)^3 +3*P1*t*(1-t)^2+3*P2*(1-t)*t^2+P3*t^3 。

 

C++代码如下:

struct Point_Float
{
    float x;
    float y;
};

float MetaComputing(float p0, float p1, float p2, float p3, float t)
{
    // 方法一:
    float a, b, c;
    float tSquare, tCube;
    // 计算多项式系数
    c = 3.0 * (p1 - p0);
    b = 3.0 * (p2 - p1) - c;
    a = p3 - b - c - p0;

    // 计算t位置的点
    tSquare = t * t;
    tCube   = t * tSquare;
    return (a * tCube) + (b * tSquare) + (c * t) + p0;

    // 方法二: 原始的三次方公式
    //  float n = 1.0 - t;
    //  return n*n*n*p0 + 3.0*p1*t*n*n + 3.0*p2*t*t*n + p3*t*t*t;
}

float MetaComputing(float p0, float p1, float p2, float t)
{
    // 方法一:
    float a, b, c;
    float tmin;
    // 计算多项式系数
    c = p0;
    b = 2.0 * p1;
    a = p2;

    // 计算t位置的点
    tmin = 1-t;
    return (tmin*tmin*c) + (tmin*t*b) + (t*t*a);

}

Point_Float PointOnTrieBezier(Point_Float* cp, float t)
{
    Point_Float tPoint;
    tPoint.x = MetaComputing(cp[0].x, cp[1].x, cp[2].x, cp[3].x, t);
    tPoint.y = MetaComputing(cp[0].y, cp[1].y, cp[2].y, cp[3].y, t);
    return tPoint;
}

Point_Float PointOnCubeBezier(Point_Float* cp, float t)
{
    Point_Float tPoint;
    tPoint.x = MetaComputing(cp[0].x, cp[1].x, cp[2].x, t);
    tPoint.y = MetaComputing(cp[0].y, cp[1].y, cp[2].y, t);
    return tPoint;
}

 

 

参考资料:    

http://blog.csdn.net/cdnight/article/details/48468653

https://www.cnblogs.com/cheneasternsun/p/5941438.html

http://blog.csdn.net/devillixin/article/details/39896355

相关文章: