ActionScript3游戏中的图像编程(连载六十五)

总目录:http://blog.csdn.net/iloveas2014/article/details/38304477

4.2 图形变换矩阵——Matrix

先从Matrix这个最常用而且最简单的矩阵入手。

4.2.1 矩阵数学实现点的基本变换

Matrix用于实现二维平面图形的基本变换:移动,缩放,旋转和斜切。

一个平面由无数多个点组成,所以,要探讨平面内一个图形的变换,我们可以从点这个元素开始。因为在Matrix的变换中,平面图形内的所有点都会执行矩阵上的变换操作。

直角坐标系中的一个点用(x,y)表示,它相当于田忌赛马故事中的两匹马。

移动是最最简单的变换: x+=tx y+=ty 用矩阵加法完全可以胜任:

缩放则需要乘法的配合:x *= scaleX,y*= scaleY。但如果是等比缩放,那我们仍然可以用简单的数乘来完成:

但是,不等比的缩放就必须用矩阵乘法了,原矩阵有两列,所以我们创建个2*2的矩阵进行变换:

根据x *= scaleX,y*= scaleY这一缩放算法,a,b,c,d应满足以下关系:

x*a+y*c=x*scaleX

x*b+y*d=y*scaleY

由第一条等式,可得a=scaleX,c=0,同理可得b=0,d=scaleY。

所以缩放的变换过程可表示为:

而旋转则比较复杂了,它需要用到三角函数的知识。

您可能会想到用极坐标(用距离和夹角来表示点位置的坐标系)快速解决旋转的难题,但此处我们没办法用上,因为原始点基于直角坐标构建,这意味着我们暂时只能用直角坐标的方法……先暂时忘记极坐标吧。

数学课本上教您的坐标旋转及三角函数公式的证明过程您可能会比较容易忘记,从而影响了您对相关公式的记忆。为此,我给出一个相对简单的证明方法。

如图 4.2,将点P(x,y)绕坐标原点O旋转角度θ,得到点P‘,求P‘的坐标(x‘,y‘)。

从图 4.2中可以看到,x‘=OB,y‘=BP‘。所以问题就转化为求OB和BP‘的长度。

图 4.2 点的旋转变换

首先,旋转的过程中,点到O的距离始终不变,即OP=OP‘,我们设OP=OP‘。

然后,考察三角形OBF和三角形P‘CF,有角OFB=角P‘FC,角FBO=角P‘CF=90度,由三角形内角和定理,得角FP‘C=角FOB=α。

下面我们开始计算OB,它等于OD-BD

其中,OD=OCcosα,OC=OP‘cosθ=OPcosθ,所以有OD=OPcosθcosα。

而BD=EC=P‘Csinα,P‘C=OP‘sinθ= OPsinθ,所以有BD= OPsinθsinα。

所以OB=OD-BD= OPcosθcosα- OPsinθsinα= OPcosαcosθ - OP sinαsinθ。

又因为OP*cosα=OA=x,OP*sinα=AP=y,所以,代入上式,得到x‘=OB=xcosθ-ysinθ。

用类似的方法,可求得y‘=BP‘=BE+BP=DC+EP

=OCsinα+P‘Ccosα

= OP‘cosθsinα+OP‘sinθcosα

=ycosθ+xsinθ。

最终的变换结果为(xcosθ-ysinθ,ycosθ+xsinθ)。

所以,旋转的变换可以用如下的矩阵表示:

显然有a=cosθ,b=sinθ,c=-sinθ,d=cosθ。

所以,旋转的矩阵可表示如下:

最后要讨论的一个变换就是斜切。在FlashPlayer10诞生之前,不少人会用这个方法实现一些简单的假3D效果,如图 4.3所示。

图 4.3 利用斜切矩阵实现的假3D效果

在图 4.3的斜切变换中,图形上的所有点只在x方向上发生变化,但是在y坐标相同的点上,x的变化量都相等。

其中,y坐标不发生任何变化,所以b和d取单位矩阵的数值0,1即可。

而x坐标则完全只跟y有关,因此在x坐标的矩阵运算结果x*a+y*c中,a=0,唯独需要探究的就是与y相乘的系数c。

图 4.3中的图形在x方向倾斜了θ度。如果以A作为坐标原点,则y=AC,B点的偏移量为BC,因为tanθ=BC/AC(上面的章节已经提到过),所以BC=AC*tanθ=y*tanθ,换而言之,当倾斜的角度=θ时,c=tanθ。

如果沿着y轴斜切θ度,则可以用同样的方法可以得出b=tanθ。

用skewX和skewY分别表示点在x轴和y轴方向上的斜切,则斜切矩阵可表示如下:

至此,常用的变换矩阵已经学完,终于可以长呼一口气了。如果您对我这些长篇大论感到茫然不知所措,那么我现在再次把这几种变换给列出来:

移动:

等比缩放:

缩放:

旋转:

斜切:

时间: 2024-10-14 04:44:21

ActionScript3游戏中的图像编程(连载六十五)的相关文章

ActionScript3游戏中的图像编程(二十)

1.4.2 灰度的计算方法 回过头来看RGB,站在科学的角度来解释,它们确实也有更明亮的理由,因为下面一排色彩反射出来的色光总量是上一排色的两倍. 为此,作者曾自作聪明地发明了一条"原创"的灰度公式: Gray=(r+g+b)/3 哈哈,用色光总量来表达颜色的灰度想必就比较准确了吧!沾沾自喜一番以后,我还试着用这条自创的定律来转换这张测试图片,上下色块的灰度果然拉开了,可是很不幸地,左右相邻,边界分明的色块依然粘连在一块(图 1.30). 图 1.30 笔者"自创"

ActionScript3游戏中的图像编程(连载四十六)

总目录:http://blog.csdn.net/iloveas2014/article/details/38304477 3.1.2 以小见大--从细节损失洞悉滤镜本质 把它再改回内斜角,边缘似乎光滑了些,但这种错觉仅仅是由于阴影与蓝色的对比度不够强烈,才会让边缘的粗糙不够显眼.把文字颜色调成浅紫以后,转角处的锯齿依旧一览无余.(图 3.6),而Photoshop应用同样的设置则不会出现同样的问题(图 3.7). 图 3.6 模糊值为3的内侧斜角滤镜 图 3.7 大小等于3的斜面样式 如果认为

ActionScript3游戏中的图像编程(连载六)

1.1    ColorTransform对RGB数值的操作及应用 flash.geom.ColorTransform是Flash内置的一个色彩变换类.它支持色彩通道值的线性变换. 所谓线性变换,是指一次函数模式的变换:dst = src * multiplier + offset.您可以将每个通道的值与常量进行四则运算.对于ColorTransform类而言,通道的原数值和变换后的数值存在以下关系: 1 red(dst) = red(src) * redMultiplier + redOffs

ActionScript3游戏中的图像编程(连载十六)

1.3.2 软件中的拾色器如何实现HSB的色彩空间模型 阅读本书的朋友恐怕很少有机会见到圆柱形的三维取色器,而HSB模式却是一个立体的空间.那么,软件里的颜色拾取器是如何在平面里体现出3D坐标系的呢?让我们从Windows调色板开始研究.图 1.22是Windows系统调色板的界面,抛开左侧的颜色列表不谈,我们可以把Windows调色板分为两个部分:一个二维的平面和一个一维的滑块.乍一看似乎跟之前的圆柱体空间扯不上任何关系,不过有没发现,最右侧那个一维的条是不是跟圆柱体的母线很像,从上而下呈现出

[原创]ActionScript3游戏中的图像编程(连载三十六)

2.2.9 Photoshop品质初探——等高线 我们点击等高线图标右侧的箭头,将弹出一个曲线列表(图 2.30). 图 2.30 等高线下拉列表 点击第二行第4个图标看看(图 2.31).哇塞,一个逆天的浮雕式投影效果. 图 2.31 给投影样式设置等高线 下面我们不妨开一下小差,做点好玩的东东,比如给投影拉出一点杂色,再将文字调成灰色(#CCCCCC),填充不透明度80%,同时把图层的混合模式改为“溶解”(混合模式将在后续章节给出详细的介绍),投影的挖空去掉,看起来就想雕刻在石碑上的文字.(

ActionScript3游戏中的图像编程(连载二十六)

2.1.3 添加渐变叠加样式 我们再给文字添加一个渐变填充来加强质感,点击“渐变叠加”项(图 2.6). 图 2.6 添加渐变叠加样式 有一点金属的味道了,再点击渐变效果预览图打开渐变编辑器(图 2.7). 图 2.7 渐变编辑器 自带的渐变效果里面,红色标注的渐变最有金属的效果了,具有铜的光感和色泽.选定这种渐变,点击“确定”,效果如图 2.8所示. 图 2.8 铜色渐变编辑完成 在图层样式面板上点击“确定”,图层样式编辑完成. 虽然出来的结果依然比较丑,但这一测试足以让我们见识到PS的图层样

ActionScript3游戏中的图像编程(连载三十六)

2.2.9 Photoshop品质初探--等高线 我们点击等高线图标右侧的箭头,将弹出一个曲线列表(图 2.30). 图 2.30 等高线下拉列表 点击第二行第4个图标看看(图 2.31).哇塞,一个逆天的浮雕式投影效果. 图 2.31 给投影样式设置等高线 下面我们不妨开一下小差,做点好玩的东东,比如给投影拉出一点杂色,再将文字调成灰色(#CCCCCC),填充不透明度80%,同时把图层的混合模式改为"溶解"(混合模式将在后续章节给出详细的介绍),投影的挖空去掉,看起来就想雕刻在石碑上

ActionScript3游戏中的图像编程(连载二十)

1.4.2 灰度的计算方法 回过头来看RGB,站在科学的角度来解释,它们确实也有更明亮的理由,因为下面一排色彩反射出来的色光总量是上一排色的两倍.      为此,作者曾自作聪明地发明了一条“原创”的灰度公式: Gray=(r+g+b)/3 哈哈,用色光总量来表达颜色的灰度想必就比较准确了吧!沾沾自喜一番以后,我还试着用这条自创的定律来转换这张测试图片,上下色块的灰度果然拉开了,可是很不幸地,左右相邻,边界分明的色块依然粘连在一块(图 1.30). 图 1.30 笔者“自创”的灰度转换 显然此法

ActionScript3游戏中的图像编程(连载二十一,第1章完)

1.4.3 用灰度/明度指导色彩搭配 试着只通过调整不等于0的通道,让上一排的色彩在灰度上保持一致,把三个颜色分别代入到心理学公式.得 Gray(red) = r * 0.299      Gray(green) = g * 0.587      Gray(blue) = b * 0.114 让它们灰度相等,则 r * 0.299 = g * 0.587 = b * 0.114 可见,b值一定最大,不妨让b取最大值255,求得r=97, g=50.把这两个值分别应用到红和绿两个色块上. 绿色不再

ActionScript3游戏中的图像编程(连载十九)

1.4 浅析亮度与灰度/明度的关系 进入正题之前,先来了解一下灰度/明度. 1.4.1 灰度/明度的概念及其与HSB亮度的异同 在很多场合,灰度与明度的概念完全等价. “灰度”最初来源于摄影领域,在彩色显像技术问世以前,拍摄出来的照片只有黑,白,灰三类颜色,在这种黑白照片里,只有白色.黑色以及灰色的点能完好无损地显示出来,其它颜色将根据其亮度呈现出不同深度的灰色.亮度越大灰色越浅,反之越深.把黑与白色之间分成若干级,称为“灰度等级”.能呈现的灰度等级愈多,画面的层次感就愈丰富. 所以,从彩色转黑