首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > Flash教程 > 正文
通过多点绘制光滑曲线
来源:闪吧 作者:ywxgood 2008年06月24日 14:35 网友评论:0条 点击:

问题:有n个随机点,需要用光滑曲线将起连接起来,曲线看上去要有一定的曲度?

思路1:从第一个点穿过第二个点到第三个点绘制曲线,然后再穿过第四个点到第五个点绘制曲线,穿过第六个点到第七个点。。。这样可以看出来,点的个数n比为奇数,才可以画到终点,暂设置n=9。

var numPoints = n;//n必为奇数,暂设为9
//创建随机点构成的一个数组
var points:Array = new Array();
for(var i=0;i<numPoints;i++){
   points[i] = {};
   points[i].x = Math.random()*stage.width;
   points[i].y = Math.random()*stage.height;
}
//设置笔触样式
lineStyle(1);
//移动笔到第一个点
moveTo(points[0].x,points[0].y);
//循环每一个相邻的后续对画曲线
for(i=1;i<numPoints;i+=2){
   curveTo(points[i].x,points[i].y,points[i+1].x,points[i+1].y);
}

思路2:在每两个点之间插入一个新的点,位于原两点之间,用所插入的点为每条曲线的起始点和终点,用原来的点作为控制点画曲线,这样没有点的个数必为奇数的限制,且画出来的曲线比第一种方法的曲线更加“好看”。如下图:

空心白点为原来的点,黑色实心点为插入的新点(图片来源:http://lovejulia.cn/blog/article.asp?id=107,参考:http://lovejulia.cn/blog/article.asp?id=107http://blog.sina.com.cn/s/blog_3ecb9b1101008z9g.html

从图上看出,第一个插入的点,与最后一个插入的点没有用到,也就是说没有用来作为任何控点和终点,所以只需要在第二个点和倒数第二个点之间插入新点,算法如下:

var numPoints = n;
var points:Array = new Array();
for(var i=0;i<numPoints;i++){
   points[i] = {};
   points[i].x = Math.random()*stage.width;
   points[i].y = Math.random()*stage.height;
}
lineStyle(1);
moveTo(points[0].x,points[0].y);
//在第二个点与倒数第二个点间插入新点,并绘制曲线
for(i=1;i<numPoints-2;i++){
   var xc = (points[i].x+points[i+1].x)/2;
   var yc = (points[i].y+points[i+1].y)/2;
   //i从1开始的,即第一个控点是原来的第二个点,终点(xc,yc)为原第二个点与第三个点间插入的新点,即第一个插入的点。。。循环结束i=numPoints-2,即还剩下两个点没有画线
   curveTo(points[i].x,points[i].y,xc,yc);
}
//追加最后一条曲线(倒数第二个点为控点,最后一个点为终点)
curveTo(points[i].x,points[i].y,points[i+1].x,points[i+1].y);

总结:思路1中是经过每个原始点画曲线,但必须要求点的个数为奇数,且最小给定点个数为三,画出来的曲线可以看出明显的衔接,曲度不够,不是要求的曲线;思路2中的曲线只是经过了第一个点和最后一个点,中间的点是根据原有点来插入的点,也就是说并没有经过给出的点,而是经过由给出点所得出的新点,这种方法得出的曲线没有点数必为奇数的限制,且曲度也可以达到要求。

上一篇:xml中运用后代存取运算符(..)的问题   下一篇:FLASH加载XML:可分页相册的制作
收藏此页】【打印】【关闭
 相关文章  我要点评
·Photoshop调色之曲线的运用
·教你用Photoshop简单打造魔幻曲线
·九个优美腿部曲线的秘密
·用Photoshop曲线去斑
·Photoshop曲线调整图片之三红绿蓝
·Photoshop曲线调整图片的重要四点用途二
·Photoshop曲线调整图片的重要四点用途
·巧用Photoshop曲线纠正照片偏色技巧

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2007 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】