看到標題也許非常多數學不好或中學時上課打盹的朋友會感到反感,但放心的是在這里的Matrix已簡化了非常多瑣碎的步驟,也不用大家拿一張紙拼命的做計算。對想制作游戲的朋友也是必學的路程,所以大致上明白了運用的思路就能說掌控了技巧。
在字典中的說明不夠充分讓大家去理解,所以開始還是要重復說明一下。Matrix矩陣就像個數組,排列方式是以列和行組成。在flash 8中所提供的是3 x 3矩陣,3x3的矩陣能定義出一個3D計算,但在Flash 8中只供2D的計算,即 x 和 y 的計算,那么我們來看看這個矩陣的定義
以上的每個字母都有各自的運用意義,分別是:
?
a = 控制 X 的寬度
b = 控制 Y 的傾斜
c = 控制 X 的傾斜
d = 控制 Y 的高度
tx = 控制 X 坐標位置
ty = 控制 Y 坐標位置
?
接下來就是怎么在Matrix函數中定義,其實非常簡單。首先匯入 Matrix 的封包,然后就能開始定義
?
import flash.geom.Matrix; //導入類包
var myMatrix:Matrix = new Matrix(a, b, c, d, tx, ty); //開始定義Matrix類
?
當中的a, b, c, d, tx, ty能直接定義。再來我們把這段引入例子,以證實及幫助了解以上各個參數的運用。
步驟1:在場景上建立一個MC,即畫個方形后按F8選擇MovieClip(影片),定義實例名為mc
步驟2:到場景第一幀開始我們的代碼
Matrix 必須配合 Transform 才能實現出所定義的效果,不多說了開始看看代碼吧
?
import flash.geom.Matrix; //導入Matrix 類包
import flash.geom.Transform; //到入Transform類包
var myMatrix:Matrix = new Matrix(1,0,0,1,100,100); //參數定義為寬度比例為1,無所有的傾斜,高度比例1,xy坐標為100
var myTransform:Transform = new Transform(mc); //Transform對象為場景上的mc
myTransform.matrix = myMatrix; //賦予transform的matrix函數為我們所定的myMatrix類
?
?
那么接下來測試就能看到結果了,看不出什么效果??那么我來換換Matrix的參數值成
var myMatrix:Matrix = new Matrix(1,1,0,1,100,100); //第二參數改為1
這樣測試是不是就看到我們的b影響了mc的形狀呢??Matrix的運用就是這樣,非常簡單吧??所以非常多東西不要以為非常困難,其實都非常簡單。
再來我們要深入一點,去了解Matrix的計算,知其一不知其二也是無法正確掌控好運用的。Matrix的計算其實非常簡單,就只有兩行的公式:
?
X’ = a*X + c*Y + tx;
Y’ = b*X + d*Y + ty;
?
?
意思就是
新坐標X = a * 現有X坐標 + c * 現有Y坐標 + 常量tx;
新坐標Y =b * 現有X坐標 +d * 現有Y坐標 + 常量ty;
?
我們把這個例子代入公式中
a = 2, b = 0, c = 0, d = 1, tx = 0, ty = 0
?
X’ = 2x + 0y + 0;
Y’ = 0x + 1y + 0;
X’ = 2x;
Y’ = y;
?
能知道下一個新的X值會是目前X的兩倍,而Y保持不變,在一開始已說了a的變化會影響寬度,那么出來的形狀就是寬度為現有的兩倍了。
在Matrix中更有幾個基本函數能控制,所以也能不用一直重新定義Matrix類,那就是
?
Matrix.scale(a,d);
Matrix.translate(tx1, ty2); //這里的tx1和ty1是所要遞增或遞減原有tx和ty的數值
Matrix.rotate(弧度); //弧度就是 (角度/ 180)* Math.PI
?
?
基本上只要代入公式就能得到答案,所以我只說明rotate函數的計算
Math.rotate((50/180)*Math.PI) //這里是需求旋轉 50 度
公式為:
?
X’ = cos(a)*X + sin(c)*Y + tx;
Y’ = -sin(b)*X + cos(d)*Y + ty;
?
?
X’ = cos(50)*X + sin(50)*Y + tx;
Y’ = -sin(50)*X + cos(50)*Y + ty;
X’ = 0.64*X + 0.76*Y + tx;
Y’ = -0.76*X + 0.64*Y + ty;
?
得到的這個答案再把現有坐標x和y代入就能求出新坐標了
那么我們來驗證a,b,c,d的數值是否正確吧,打開一個新的場景,在幀上輸入
import flash.geom.Matrix;
var myMatrix:Matrix = new Matrix();
myMatrix.rotate((50/180)*Math.PI);
trace(myMatrix.toString()); //看看當中的a,b,c,d是不是也是這個數值呢?
好啦。。到了最后的部分也就能完結這篇教程了,最重要的一點也是非常多人百思不解的問題是:
?
求出一個X和Y,為何會能夠讓元件轉動呢?這只是個坐標啊??最多也只是控制坐標點,怎么那么神奇??
?
?
這點就是Flash提供的方便了,其實為何需要配合Transform的關鍵就是在此,Transform指定了元件之后會得到4個角的坐標。所以我們使用Transform.matrix函數就是讓transform把Matrix的公式代入每個角的坐標。
?
所以公式中的x和y就是每個角的坐標,坐標代入公式就直接取得了新的坐標值而達到旋轉變形等的功能。這是不是簡單化了非常多呢??總比在之前版本還要自己定義函數。
?
?
?
?
方案二:
?
在AS3中Matrix可以說有著很重要的作用,為什么這么說呢,因為它可以控制我們的元件進行伸縮或傾斜,這是AS2所做不到的,或者說很難做到。這里提一句,在AS2中如果我們想傾斜一個對象就需要將這個對象切成三角形然后進行變換,比較麻煩,在早先的PV3D中我們可以看到這樣的實例。這里我們不做過多介紹!既然AS3為我們準備了這么好的工具為什么我們不用呢?浪費了這么好的資源。打開FLASH的幫助面板查看一下吧!你會發現幫助不大,貌似里面說的都不能看懂,寫的很復雜,實際上并沒有這么復雜,而且使用起來非常的方便,經過筆者研究,發現Matrix類實際上只有2點要值得注意的地方,其他地方簡單至極。好了下面我們就來看看這個令人摸不著頭腦的Matrix類吧!?
?? ? ? 首先,我們要看看Matrix類的構造器函數,其實我是想讓大家看看他的6個屬性,,這6個屬性對與我們非常的重要,他決定這我們的最終效果是什么樣子的,會產生什么樣的傾斜,都由這6個屬性控制。看一下!
Matrix(a:Number = 1, b:Number = 0, c:Number = 0, d:Number = 1, tx:Number = 0, ty:Number = 0);
?? ? ? 可以看到,6個參數,或者說6個屬性分別是a,b,c,d,tx,ty。那么這6個屬性分別是做什么的呢?這里我們不按照它的順序來講解,而是從最簡單的開始。這樣大家讀起來就方便理解一些。在這6個屬性中最簡單的2個是最后2個。那么它們起到的作用是什么呢?答案是“位置坐標”。一看到這4個字大家應該這個時候都明白了,實際上這2個屬性和我們平常用的x,y屬性的作用是完全一樣的,他們的作用就是設置對象的橫縱坐標!我想到這里大家應該對這點都再清楚不過了!x,y屬性是我們最常見的屬性了,也是使用率最多的屬性,幾乎每創建一個對象我們就要設置一下x,y屬性。所以這里我們不在做過多的解釋了!唯一要注意的一點是tx,ty這2個屬性的默認值是0,0。也就是說,當我們沒有對這2個參數進行設置的時候,系統會默認的將對象的位置放置到原點坐標,也就是(0,0)點。這一點大家注意一下即可。
?? ? ? 好了!最簡單的2個屬性我們說完了,還剩下4個,那么我們還是遵循由易到難的規則來講解。這次我們要提到的屬性是a,d。有人會問為什么不是a和b呢?實際上,在這6個屬性中a和d是一組。所以我們這里要將這2個屬性放到一起去講解。那么這2個屬性是做什么用的呢?我再寫另外2個和Matrix類無關的2個屬性來比較一下!scaleX和scaleY。有人會說,你將這2個屬性放到這里做什么?首先,你要知道這2個屬性的功能—控制縮放比例。知道了它們的功能實際上就知道了a和d的功能。不錯,a和d的功能就是控制縮放比例。當他們的值為1的時候,就表示按照原有大小進行顯示,如果為2,就表示放大一倍。非常好理解,可以說簡單至極,這4個屬性我們可以用其他的4個屬性來間接理解,功能上沒有任何區別,只是放到的類中不同罷了。相信大家讀到這里會感覺到,原來Matrix類沒有什么神秘的,不過是一個普普通通的類而已。
?? ? ? 最后,我們還剩下2個屬性,也是最難理解,最難明白的兩個屬性。我將用很大的篇幅來介紹這2個屬性,細致的來分析它們的用法及使用注意事項。
?? ? ? b,c默認值為0。看到這里我們應該知道,默認是沒有傾斜的。說到這里,可能很多人多這兩個屬性的功能還不清楚,在此再強調一遍,這兩個屬性是控制顯示對象傾斜的。所謂傾斜,舉一個最簡單的例子,就是把一個長方形編程一個平行四邊形。這樣解釋就直觀多了。好了!那么他們怎么樣來控制傾斜的度數呢?這才是我們的重點,就是如何控制傾斜的角度。說到角度,先拋開b,c不說,在FLASH當中我們不可以直接使用度數,為什么呢?不知道,沒有原因,ADOBE公司就是這么設計的,沒辦法。那么我們用什么來表示度數呢?我們可以使用弧度單位來表示度數。這里要提一句“360°=2π弧度”。這個公式大家一定要記住,以后會經常用到,那么比如說我們要表示30°,那應該怎么寫呢?就是寫成下面這樣:
30*π/180
在AS3中的寫法就是這樣的:
30*Math.PI/180
?? ? ? 這樣寫,在AS3中就表示30°了。好了!我們先來看b吧。這個b表示顯示對象沿Y軸傾斜。我們來看一段代碼:
var ju:Matrix = new Matrix(1,2,0,1,0,0);
a_mc.transform.matrix = ju;
?? ? ?這段代碼的b屬性我設置成了2,那么也就是說元件會沿Y軸向下傾斜。我們來看原圖片,這是沒有執行語句前的圖像。
?
?? ? ? ?這里,我為了標識出藍色方塊原來的位置,我用紅色的線來記錄一下。注意:紅色的線只起到一個標尺的作用。好了!下面我們來執行一下語句。
?
?? ? ? ?我們看到,原來的矩形已經嚴重傾斜了!這就是傾斜的效果。那么我們要注意的是什么呢?或者說我想給大家的只是點是什么呢?請大家注意,矩形雖然傾斜了,但是他的寬沒有變化,同時,他的左右兩條邊的長度也沒有發生變化。唯一變化的就是它的高和上下兩條邊。這一點大家要值得注意。有人會說了!這只是向右側傾斜,那如果我想向左側傾斜怎么辦呢?簡單,我們只需要將b的值改為負數即可!這里就不在做演示了!大家可以自行實驗。那么下面要講解的就是如何去控制傾斜的角度!這里我們先來看一個圖!
?
?? ? ? 我們來看一下這個圖,現在假如我想要這個藍色的矩形傾斜30°,也就是說∠A的度數為30°。那么這個時候我們怎么表示屬性b呢?我們要使用到三角函數中的正切。所為正切就是這樣的。
正切(tan):角α的對邊比上鄰邊
?? ? ? 這是比較正確且規范的說法。那么好了!這個正切值就表示了屬性b。在這個實例中,正切值實際上就是P/Q。得到的就是正切值。那么,我們不可能在沒一個程序中自己手動的去計算我們這個正切值。所以這里又要用到AS3中的Math類。在這個工具類中有專門用于計算正切值的方法。我們來實際的寫一個程序來看一下。代碼如下:
var ju:Matrix = new Matrix(1,Math.tan(30*Math.PI/180),0,1,0,0);
a_mc.transform.matrix = ju;
?? ? ? 這里我們就將傾斜角度設置為了30°。我們測試一下影片就可以看到效果了!這就是b屬性的用法,那么c屬性又說做什么的呢?和b屬性的功能相同,只不過這次是沿X軸進行傾斜,我們同樣傾斜30°來看一下。
var ju:Matrix = new Matrix(1,0,Math.tan(30*Math.PI/180),1,0,0);
a_mc.transform.matrix = ju;?
?
?? ? ? 不過這次要注意的是,雖然傾斜了,但是矩形的上下兩條邊并沒有改變長度,且矩形的高也沒有改變。
這就是向右傾斜。如果想要想做傾斜也非常的簡單,只要將c的屬性改成負數就可以了。
?? ? ? 最后,我們來看一種比較常用的情況,就是X軸Y周同時傾斜。代碼如下,我們還是傾斜30°。
var ju:Matrix = new Matrix(1,Math.tan(30*Math.PI/180),Math.tan(30*Math.PI/180),1,0,0);
a_mc.transform.matrix = ju;
運行效果如下:
?
?? ? ? 這次我們就不能保證寬高都沒有變化了!應為X軸和Y軸都發生了傾斜,所以都改變了!
好了!關于Matrix類我們就說這么多,具體的使用技巧還需要大家實踐得來!886各位!今天就寫到這里!以后有什么新的應用還會寫出來給大家參考的!
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
