flash 中matrix

http://help.adobe.com/zh_CN/AIR/1.1/jslr/flash/geom/Matrix.html

英文版本详细资料

http://www.senocular.com/flash/tutorials/transformmatrix/

看到标题也许非常多数学不好或中学时上课打盹的朋友会感到反感,但放心的是在这里的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的数值是否正确吧,打开一个新的场景,在帧上输入

1
2
3
4
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各位!今天就写到这里!以后有什么新的应用还会写出来给大家参考的!


public static function getScaleX(m:Matrix):Number
{
        return Math.sqrt(m.a*m.a + m.b*m.b);
}

public static function getScaleY(m:Matrix):Number
{
        return Math.sqrt(m.c*m.c + m.d*m.d);
}

public static function getSkewX(m:Matrix):Number
{
        return Math.atan2(-m.c, m.d) * (180/Math.PI);
}

public static function getSkewY(m:Matrix):Number
{
        return Math.atan2(m.b, m.a) * (180/Math.PI);
}

原文地址:https://www.cnblogs.com/zitonglove/p/4866062.html