Flash中步入Matrix函數

來源:互聯網
上載者:User
函數

  因為工作忙,所以很久沒有出來寫教程了。今天就來寫個目前Flash 8所提供的新函數,在中文網站中也還沒有看到的,這應該比較新鮮吧

  看到標題也許很多數學不好或中學時上課打盹的朋友會感到反感,但放心的是在這裡的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就是每個角的座標,座標代入公式就直接取得了新的座標值而達到旋轉變形等的功能。這是不是簡單化了很多呢??總比在之前版本還要自己定義函數。   好啦。。此篇教程結束。希望轉載的朋友附上作者名字,謝謝。

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。