免费注册 |登录

偶要雷锋:web应用综合服务平台论坛Web技术问答 › 查看主题

9024

查看

24

回复
返回列表

Rank: 6Rank: 6

偶元
4782  
帖子
96 
UID
32 
go

一个使用ActionScript画线的代码

1#
发表于 2007-10-18 18:10 | 只看该作者 | 倒序看帖 | 打印
这段代码只要增加或更改数组里的点就可以画线了。当然也可以和其他程序结合使用
代码如下:
  1. var point = new Array();
  2. point[0] = [100, 200];
  3. point[1] = [300, 300];
  4. point[2] = [100, 100];
  5. point[3] = [200, 400];
  6. var x = point[0][0];
  7. var y = point[0][1];
  8. var i = 1;
  9. createEmptyMovieClip("line", 1);
  10. line.lineStyle(1, 0x0000FF, 100);
  11. line.moveTo(point[0][0], point[0][1]);
  12. line.onEnterFrame = function() {
  13.     if (x != point[0] && y != point[1]) {
  14.     x = (x < point[0]) ? (x + 1) : (x - 1);
  15.     y = (x-point[i-1][0])*(point[1]-point[i-1][1])/(point[0]-point[i-1][0])+point[i-1][1];
  16.     this.lineTo(x, y);
  17. } else if (x != point[0]) {
  18.     x = (x < point[0]) ? (x + 1) : (x - 1);
  19.     this.lineTo(x, y);
  20. } else if (y != point[1]) {
  21.     y = (x < point[1]) ? (y + 1) : (y - 1);
  22.     this.lineTo(x, y);
  23. } else if (i < point.length - 1) {
  24.     i++;
  25. } else {
  26.     delete this.onEnterFrame;
  27. }
  28. };
复制代码
代码解析:

首先,先建立个叫point的数组,用来存放各个点的信息...这里是加了四个点,当然你可以随便修改里面的值,或是随便增加其他的点,不过注意按顺序排列哦,不然就得加个排序进去..
  1. var point = new Array();
  2. point[0] = [100, 200];
  3. point[1] = [300, 300];
  4. point[2] = [100, 100];
  5. point[3] = [200, 400];
复制代码
定义x和y的初始值为point的第一个元素里的值...以及定义i为1
  1. var x = point[0][0];
  2. var y = point[0][1];
  3. var i = 1;
复制代码
开始画线的程序了,创造个空的MC,并命名为line,放在第一层上
  1. createEmptyMovieClip("line", 1);
复制代码
设置线的属性,宽度为1,颜色是纯蓝色,透明度为100,也就是不透明,你可以按照自己的喜好来更改这里的属性
  1. line.lineStyle(1, 0x0000FF, 100);
复制代码
在line里定义起点为数组第一个元素里的两个值
  1. line.moveTo(point[0][0], point[0][1]);
复制代码
开始运算...
当x和y都没到达目标的时候,继续画下去
  1. if (x != point[0] && y != point[1]) {
复制代码
这里是个不太好理解的条件表达式...人懒没办法,也就是说当?前面的条件为真时,为x赋值,相当于x=x+1,条件不成立时x=x-1,下面的道理都一样
x = (x < point
[0]) ? (x + 1) : (x - 1);
至于y坐标,就需要用到相似三角形的原理了:
  1. y = (x-point[i-1][0])*(point[1]-point[i-1][1])/(point[0]-point[i-1][0])+point[i-1][1];
复制代码
line画到这里,x,y轴就是对应x,y的值,
  1. this.lineTo(x, y);
复制代码
某个点到达目标了,比如y到达了y轴的值,那么y就该停止,而x继续运算,所以我们必须写出下面的东西...
  1.     } else if (x != point[0]) {
  2.         x = (x < point[0]) ? (x + 1) : (x - 1);
  3.         this.lineTo(x, y);
复制代码
这里是和上面x的道理是一样的..表说你看不懂..-___-b
  1.    } else if (y != point[1]) {
  2.         y = (y < point[1]) ? (y + 1) : (y - 1);
  3.         this.lineTo(x, y);
复制代码
当x,y都到达目标,那么,就该向下一个点出发了,所以i++以后就变成了2,给循环的时候取数组里第二个元素里面的东西
  1. } else if (i < point.length - 1) {
  2.         i++;
复制代码
咳咳,所有的点都跑完了,那么该画个圆满的句号,把onEnterFrame事件删除吧.    }
  1. else {
  2.         delete this.onEnterFrame;
  3.     }
  4. };
复制代码
当然,你也可以在这里让线返回到开始的点,怎么画呢?自己试一下吧,编程并不像你想象中的那么难,只是一个逻辑的过程而已,呵呵,第一次写教程,还望各位大虾指教一下...


[ 本帖最后由 victor 于 2007-10-18 18:33 编辑 ]
附件: 您需要登录才可以下载或查看附件。没有帐号?免费注册

TOP

Rank: 1

偶元
5  
帖子
UID
60516 
2#
发表于 2007-12-13 17:48 | 只看该作者

》》》》???

不知道web页面上的股票趋势图是不是flash生成的/...

TOP

Rank: 1

偶元
21  
帖子
33 
UID
80416 
3#
发表于 2008-2-17 00:20 | 只看该作者
学习了,谢谢

TOP

Rank: 1

偶元
7  
帖子
UID
111838 
4#
发表于 2008-4-22 09:45 | 只看该作者
正在学习

TOP

Rank: 1

偶元
2  
帖子
144 
UID
158296 
5#
发表于 2008-11-7 23:23 | 只看该作者
正需要呢,,

TOP

Rank: 1

偶元
4  
帖子
UID
136749 
6#
发表于 2008-11-20 20:32 | 只看该作者
起啦! 赞赞一个!!

TOP

Rank: 4

偶元
1082  
帖子
1693 
UID
126552 
7#
发表于 2008-11-21 08:35 | 只看该作者
Thank you!!

TOP

Rank: 4

偶元
1082  
帖子
1693 
UID
126552 
8#
发表于 2008-11-21 08:36 | 只看该作者

TOP

Rank: 1

偶元
2  
帖子
92 
UID
103066 
9#
发表于 2008-12-19 00:50 | 只看该作者
看起来 很不错

TOP

Rank: 1

偶元
2  
帖子
92 
UID
103066 
10#
发表于 2008-12-19 00:51 | 只看该作者
看起来 很不错

TOP

【51leifeng.net】 ( 京ICP备07014643号)

GMT+8, 2010-8-1 15:32, Processed in 0.057083 second(s), 9 queries.

Powered by Discuz! X1

© 2007-2010 51leifeng.net