//anchorpoints:贝塞尔基点
//pointsAmount:生成的点数
    //return 路径点的Array
function CreateBezierPoints(anchorpoints, pointsAmount) {
var points = [];
for (var i = 0; i < pointsAmount; i++) {
var point = MultiPointBezier(anchorpoints, i / pointsAmount);
points.push(point);
}
return points;
} function MultiPointBezier(points, t) {
var len = points.length;
var x = 0, y = 0;
var erxiangshi = function (start, end) {
var cs = 1, bcs = 1;
while (end > 0) {
cs *= start;
bcs *= end;
start--;
end--;
}
return (cs / bcs);
};
for (var i = 0; i < len; i++) {
var point = points[i];
x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
}
return { x: x, y: y };
}

以上是计算高阶贝赛尔曲线所有点的方法,

方法引用了引用公式

下面是示例代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var guijipoints = [];
var index = 0;
$(document).ready(function () {
var ps = [{ x: 0, y: 0 }, { x: 100, y: 200 }, { x: 200, y: 10 }, { x: 300, y: 400 }, { x: 400, y: 20 }, { x: 200, y: 500 }, { x: 500, y: 30 }, { x: 700, y: 300 }, { x: 800, y: 800 }, { x: 800, y: 800 }];
guijipoints = CreateBezierPoints(ps, 1000);
var moveobj = $("#move_div");
setInterval(function () {
var p = guijipoints[index];
console.log(p.x);
moveobj.css({ left: p.x, top: p.y });
index++;
if (index >= guijipoints.length) {
index = 0;
}
}, 1000 / 100);
guijipoints.forEach(function (obj, i) {
createDiv(obj.x, obj.y);
});
}); function createDiv(x, y) {
$("body").append('<div style="position: absolute; width: 2px; height: 2px; left:' + x + 'px;top:' + y + 'px; overflow: hidden; background-color: #FF0000"></div>');
} //anchorpoints:贝塞尔基点
//pointsAmount:生成的点数
function CreateBezierPoints(anchorpoints, pointsAmount) {
var points = [];
for (var i = 0; i < pointsAmount; i++) {
var point = MultiPointBezier(anchorpoints, i / pointsAmount);
points.push(point);
}
return points;
} function MultiPointBezier(points, t) {
var len = points.length;
var x = 0, y = 0;
var erxiangshi = function (start, end) {
var cs = 1, bcs = 1;
while (end > 0) {
cs *= start;
bcs *= end;
start--;
end--;
}
return (cs / bcs);
};
for (var i = 0; i < len; i++) {
var point = points[i];
x += point.x * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
y += point.y * Math.pow((1 - t), (len - 1 - i)) * Math.pow(t, i) * (erxiangshi(len - 1, i));
}
return { x: x, y: y };
} </script> </head> <body>
<div id="move_div" style=" position: absolute; left: 0px; top: 0px; height: 10px; width: 10px; background-color: red; "></div>
</body>
</html>

运行结果图如下:

一次、二次、三次贝塞尔曲线函数

function onebsr(t, a1, a2) {
return a1 + (a2 - a1) * t;
} function twobsr(t, a1, a2, a3) {
return ((1 - t) * (1 - t)) * a1 + 2 * t * (1 - t) * a2 + t * t * a3;
} function threebsr(t, a1, a2, a3, a4) {
return a1 * (1 - t) * (1 - t) * (1 - t) + 3 * a2 * t * (1 - t) * (1 - t) + 3 * a3 * t * t * (1 - t) + a4 * t * t * t;
}

贝塞尔曲线算法,js贝塞尔曲线路径点的更多相关文章

  1. 关于曲线 规划 算法 线性 S曲线 贝塞尔曲线

    工控领域经常会涉及速度加减速的算法:线性加减速,S曲线加减速(sin函数,拓展其他三角函数曲线), 贝塞尔曲线,等等. 线性加减速:    设定起始速度V0,目标速度V1,加速时间Ta(s,或加速度) ...

  2. Node.js文件系统、路径的操作详解

    17173 17173 2 75 2014-12-12T05:06:00Z 2014-12-12T05:06:00Z 21 2735 15595 www.17173.com 129 36 18294 ...

  3. js相对路径相关(比如:js中的路径依赖导入该js文件的路径)

    问题描述: 前几天调用同事的js接口文件,在他自己的html测试页面ok,在我这边调用时出现问题. debug过程中,将该测试html移到其他位置都不行,放到原html测试页面同层次路径下是OK的. ...

  4. Node.js文件系统、路径的操作函数

    Node.js文件系统.路径的操作函数 目录 Node.js文件系统.路径的操作函数 1.读取文件readFile函数 2.写文件 3.以追加方式写文件 4.打开文件 5.读文件,读取打开的文件内容到 ...

  5. gif格式的图片不能存在与包含js目录的路径中?

    如题:gif格式的图片不能存在与包含js目录的路径中?是我的设置问题?还是真不能存在于js目录中. 今天纠结了一下午,某个项目中的效果就是出不来,找了差不多两个半小时... 在D盘新建一个js和jss ...

  6. 关于Node.js中的路径问题

    在前端学习过程中,涉及到路径的问题非常多,相对路径,绝对路径等.有时候明明觉得没问题,但是还是会出错.或者说线下没问题,但是到了线上就出现问题,因此弄懂路径问题,非常关键.我们需要知道为什么这个地方既 ...

  7. node.js中path路径模块的使用

    path模块是node.js中处理路径的核心模块.可以很方便的处理关于文件路径的问题. join() 将多个参数值合并成一个路径 const path = require('path'); conso ...

  8. P-R曲线及与ROC曲线区别

    一.P-R曲线 P-R曲线刻画查准率和查全率之间的关系,查准率指的是在所有预测为正例的数据中,真正例所占的比例,查全率是指预测为真正例的数据占所有正例数据的比例. 即:查准率P=TP/(TP + FP ...

  9. linux sed命令查询结果前后批量追加内容(html文件批量修改css,js等文件路径)

    1.需求:linux使用shell命令查询结果前后批量追加内容 例如:我需要在当前目录下所有的css文件路径前追加域名 我想的是用sed替换去实现,鲍哥的思路是用for循环 1.1方法1:鲍哥的for ...

  10. 微信小程序存放视频文件到阿里云用到算法js脚本文件

           peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...

随机推荐

  1. JavaWeb 学习003-简单登录页面功能实现

    先说下题外话:学习不是看你学了多久,重点是学到多少: 这就要求   效率.我在这三个小时,但是有效率的又有多久?只是做了这么一点简单的事. 登录页面 跟数据库交互,进行判断是否登陆成功.我只是实现了一 ...

  2. 安卓开发:效果图中标注的像素尺寸如何转换为安卓的dp尺寸?

    我们的UI基于1920x1080分辨率给的尺寸标注,但是在安卓开发中大家一般都使用dp.sp来标注界面尺寸,所以需要一个dp与sp的转换公式. 一开始参考的的这篇文章:关于Android开发中px.d ...

  3. CPU寄存器

    CPU寄存器主要的有 CS:IP这是代码段,主要是执行代码的: SS:SP这是栈段,很多时候数据都要用它, ds:si,这是一个数据段, 还有一个标志寄存器flag,中断的时候要保存它的信息,以便中断 ...

  4. 颤抖吧,骚年们,2016年末最牛逼的sql语句

    select channel_name,from_unixtime(createTime,'%Y-%m-%d') as tdate,count(deviceid) '安装量',count(case w ...

  5. Android Home键状态保存运用场景

    当我们在一个Activity中有接收Intent过来的值,或者当前Activity有保存数据时候,如果此时不小心按到了Home键,然后没有及时回来而是运行了其它应用程序,当你想起来的时候,恐怕已经是几 ...

  6. RequireJS进阶(三) 转

    进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一个js文件或把所有的css压缩为一个css文件.其中包括一些压缩配置参数的使用. 但以上两种方式有几个问题 1.通过命令手动配置压缩选项显 ...

  7. optimize table-2

    今天在看CU的时候,发现有人问有关optimize来表优化的问题,当年因为这个问题,困扰我很长一段时间,今天有空我把这个问题,用实际数据来展示出来,让大家可以亲眼来看看,optimize table的 ...

  8. python 读取文件时报错UnicodeDecodeError: &#39;gbk&#39; codec can&#39;t decode byte 0x80 in position 205: illegal multibyte sequence

    python读取文件时提示"UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 205: illegal m ...

  9. 基于Centos开启samba服务

    1.安装samba服务: yum -y install samba samba-common samba-client2.查看samba服务状态: service smb status: 正常状态是: ...

  10. 用css绘制各种图形

    1.用css绘制三角形 http://www.cnblogs.com/blosaa/p/3823695.html