|
只要增加或更改數(shù)組里的點就可以畫線了。當然也可以和其他程序結(jié)合使用
var point = new Array();
point[0] = [100, 200];
point[1] = [300, 300];
point[2] = [100, 100];
point[3] = [200, 400];
var x = point[0][0];
var y = point[0][1];
var i = 1;
createEmptyMovieClip("line", 1);
line.lineStyle(1, 0x0000FF, 100);
line.moveTo(point[0][0], point[0][1]);
line.onEnterFrame = function() {
if (x != point[i][0] && y != point[i][1]) {
x = (x < point[i][0]) ? (x + 1) : (x - 1);
y = (x-point[i-1][0])*(point[i][1]-point[i-1][1])/(point[i][0]-point[i-1][0])+point[i-1][1];
this.lineTo(x, y);
} else if (x != point[i][0]) {
x = (x < point[i][0]) ? (x + 1) : (x - 1);
this.lineTo(x, y);
} else if (y != point[i][1]) {
y = (x < point[i][1]) ? (y + 1) : (y - 1);
this.lineTo(x, y);
} else if (i < point.length - 1) {
i++;
} else {
delete this.onEnterFrame;
}
};
代碼解析：
首先,先建立個叫point的數(shù)組,用來存放各個點的信息...這里是加了四個點,當然你可以隨便修改里面的值,或是隨便增加其他的點,不過注意按順序排列哦,不然就得加個排序進去..
var point = new Array();
point[0] = [100, 200];
point[1] = [300, 300];
point[2] = [100, 100];
point[3] = [200, 400];
定義x和y的初始值為point的第一個元素里的值...以及定義i為1
var x = point[0][0];
var y = point[0][1];
var i = 1;
開始畫線的程序了,創(chuàng)造個空的MC,并命名為line,放在第一層上
createEmptyMovieClip("line", 1);
設(shè)置線的屬性,寬度為1,顏色是純藍色,透明度為100,也就是不透明,你可以按照自己的喜好來更改這里的屬性
line.lineStyle(1, 0x0000FF, 100);
在line里定義起點為數(shù)組第一個元素里的兩個值
line.moveTo(point[0][0], point[0][1]);
開始運算...
line.onEnterFrame = function() {
當x和y都沒到達目標的時候,繼續(xù)畫下去
if (x != point[i][0] && y != point[i][1]) {
這里是個不太好理解的條件表達式...人懶沒辦法,也就是說當?前面的條件為真時,為x賦值,相當于x=x+1,條件不成立時x=x-1,下面的道理都一樣
x = (x < point[i][0]) ? (x + 1) : (x - 1);
至于y坐標，就需要用到相似三角形的原理了：
y = (x-point[i-1][0])*(point[i][1]-point[i-1][1])/(point[i][0]-point[i-1][0])+point[i-1][1];
line畫到這里,x,y軸就是對應(yīng)x,y的值,
this.lineTo(x, y);
某個點到達目標了,比如y到達了y軸的值,那么y就該停止,而x繼續(xù)運算,所以我們必須寫出下面的東西...
} else if (x != point[i][0]) {
x = (x < point[i][0]) ? (x + 1) : (x - 1);
this.lineTo(x, y);
這里是和上面x的道理是一樣的..表說你看不懂..-___-b
} else if (y != point[i][1]) {
y = (y < point[i][1]) ? (y + 1) : (y - 1);
this.lineTo(x, y);
當x,y都到達目標,那么,就該向下一個點出發(fā)了,所以i++以后就變成了2,給循環(huán)的時候取數(shù)組里第二個元素里面的東西
} else if (i < point.length - 1) {
i++;
咳咳,所有的點都跑完了,那么該畫個圓滿的句號,把onEnterFrame事件刪除吧. } else {
delete this.onEnterFrame;
}
};
當然,你也可以在這里讓線返回到開始的點,怎么畫呢?自己試一下吧,編程并不像你想象中的那么難,只是一個邏輯的過程而已,呵呵,第一次寫教程,還望各位大蝦指教一下...
下載源文件
出處：藍色理想
責任編輯：qhwa
◎進入論壇Flash專欄版塊參加討論
|
