Flash/Flex学习笔记(56):矩阵变换

简介: 先回顾一下Silvelright中的矩阵变换[转]WPF中的MatrixTransform,简单点讲:矩阵变换能改变对象的x,y坐标,x或y方向上的缩放,以及对象在x,y轴上的旋转(扭曲变形) 上面这个是WPF/Silverlight中的3*3变换矩阵,其中X,Y用于改变对象的坐标;M11,M22用于对象在x,y轴上的缩放;而M12,M21用于y轴,x轴上的扭曲。

先回顾一下Silvelright中的矩阵变换[转]WPF中的MatrixTransform,简单点讲:矩阵变换能改变对象的x,y坐标,x或y方向上的缩放,以及对象在x,y轴上的旋转(扭曲变形)

上面这个是WPF/Silverlight中的3*3变换矩阵,其中X,Y用于改变对象的坐标;M11,M22用于对象在x,y轴上的缩放;而M12,M21用于y轴,x轴上的扭曲。

 

As3.0中的Matix类跟这个类似:

只不过,这个矩阵旋转了一下(行列互换了),tx,ty仍然是用于坐标的平移;a,d用于x,y方向的缩放(前提是b,c设置为0);b,c用于y,x轴上的扭曲。当然这些元素可以组合起来使用。(更详细的用法,请参阅AS3.0 Matrix )

 

tx,ty的平移示例:

import fl.events.SliderEvent;

var box:Box = new Box();
var startX:Number = stage.stageWidth/2 ;
var startY:Number = stage.stageHeight/2 ;
box.x = startX;
box.y = startY;
addChild(box);

silder_tx.addEventListener(SliderEvent.CHANGE,slider_tx_ChangeHandler);
silder_ty.addEventListener(SliderEvent.CHANGE,slider_ty_ChangeHandler);

function slider_tx_ChangeHandler(e:SliderEvent):void{	
	txt_tx.text = e.value.toString();	
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.tx = startX + e.value;   
    box.transform.matrix = tempMatrix;

}

function slider_ty_ChangeHandler(e:SliderEvent):void{	
	txt_ty.text = e.value.toString();
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.ty = startY + e.value;   
    box.transform.matrix = tempMatrix;
}

a,d缩放示例:

import fl.events.SliderEvent;

var box:Box = new Box();
var startX:Number = stage.stageWidth/2;
var startY:Number = stage.stageHeight/2;
box.x = startX;
box.y = startY;
addChild(box);

silder_scaleX.addEventListener(SliderEvent.CHANGE,silder_scaleX_ChangeHandler);
silder_scaleY.addEventListener(SliderEvent.CHANGE,silder_scaleY_ChangeHandler);

function silder_scaleX_ChangeHandler(e:SliderEvent):void{	
	txt_tx.text = e.value.toString();	
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.a = e.value;//x轴缩放
    box.transform.matrix = tempMatrix;

}

function silder_scaleY_ChangeHandler(e:SliderEvent):void{	
	txt_ty.text = e.value.toString();
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.d = e.value; //y轴缩放  
    box.transform.matrix = tempMatrix;
}

a,b,c,d 旋转示例:

import fl.events.SliderEvent;

var box:Box = new Box(50,100,0x00ff00);
var startX:Number = stage.stageWidth/2 ;
var startY:Number = stage.stageHeight/2 ;
box.x = startX;
box.y = startY;
addChild(box);

var box2:Box = new Box(100,75,0xff6600);

box2.x = startX;
box2.y = startY;
addChild(box2);

silder_Angle.addEventListener(SliderEvent.CHANGE,silder_Angle_ChangeHandler);

function silder_Angle_ChangeHandler(e:SliderEvent):void{	
	txt_tx.text = e.value.toString();	
	
	var angle = e.value * Math.PI /180;
	//trace(angle);
	
	var sin = Math.sin(angle);
	var cos = Math.cos(angle);	
	
	var tempMatrix:Matrix = box.transform.matrix;
    tempMatrix.a = cos;
	tempMatrix.b = sin;
	tempMatrix.c = -sin;
	tempMatrix.d = cos;
	box.transform.matrix = tempMatrix;	
	box2.transform.matrix = tempMatrix;		
    
}

b,c 倾斜示例:

import fl.events.SliderEvent;

var box:Box = new Box(50,50);
var startX:Number = stage.stageWidth/2 ;
var startY:Number = stage.stageHeight/2 ;
box.x = startX;
box.y = startY;
addChild(box);

silder_skewX.addEventListener(SliderEvent.CHANGE,silder_skewX_ChangeHandler);

function silder_skewX_ChangeHandler(e:SliderEvent):void{	
	txt_tx.text = e.value.toString();		
	var angle = e.value * Math.PI /180;	
	var tan = Math.tan(angle);	
	var tempMatrix:Matrix = box.transform.matrix;    	
	tempMatrix.c = tan;	
	box.transform.matrix = tempMatrix;   
}


silder_skewY.addEventListener(SliderEvent.CHANGE,silder_skewY_ChangeHandler);

function silder_skewY_ChangeHandler(e:SliderEvent):void{	
	txt_ty.text = e.value.toString();		
	var angle = e.value * Math.PI /180;	
	var tan = Math.tan(angle);	
	var tempMatrix:Matrix = box.transform.matrix;    	
	tempMatrix.b = tan;	
	box.transform.matrix = tempMatrix;   
}

 

目录
相关文章
|
内存技术
Flash/Flex学习笔记(20):贝塞尔曲线
贝塞尔曲线的身影几乎在所有绘图软件中都有出现,下面的代码演示了如何用AS3.0画一段简单的贝塞尔曲线(没有使用Document文档类,想测试的朋友,直接把下面的代码复制贴到第一帧即可) import fl.
756 0
|
Java Spring 内存技术
Flash/Flex学习笔记(41):碰撞检测
碰撞检测基本上可能分为二类:对象与对象的碰撞检测、对象与点的碰撞检测 为了方便测试,先写一个box类(生成一个小矩形) package { import flash.display.Sprite; public class Box extends Sprite { ...
884 0
|
Java 内存技术 Spring
Flash/Flex学习笔记(44):万有引力与粒子系统
万有引用公式: 其中G为万有引力常数   var numParticles:uint=50;//粒子总数 var G:Number=0.03;//万有引力常数 var particles:Array=new Array(numParticles); var bounce:Number=-0.
832 0
|
内存技术
Flash/Flex学习笔记(24):粒子效果
粒子爆炸: 仍然要用到以前的小球类,不过稍加改造 package { import flash.display.Sprite; //小球 类 public class Ball extends Sprite { public var radius:uint;//半径 ...
1021 0
|
内存技术
Flash/Flex学习笔记(51):3维旋转与透视变换(PerspectiveProjection)
Flash/Flex学习笔记(49):3D基础 里已经介绍了3D透视的基本原理,不过如果每次都要利用象该文中那样写一堆代码,估计很多人不喜欢,事实上AS3的DisplayObject类已经内置了z坐标、rotationX、rotationY、rotationZ属性,再加上PerspectiveProjection类用于处理透视转换,基本上可以满足大多数的3D要求。
1066 0
|
内存技术
Flash/Flex学习笔记(22):滤镜学习
Silverlight中称之为“效果(Effect)”的东东,在Flash里叫“滤镜(Filter)",而且Flash里内置的滤镜要比Silverlight丰富很多,几乎所有对象都有一个filters的属性,它是一个数组,可以将一个或多个滤镜同时应用于某一对象,类似的,如果要去除已经应用的滤镜效果,...
919 0
|
内存技术 图形学
Flash/Flex学习笔记(18):画线及三角函数的基本使用
Sprite有一个graphics可以用来绘制基本图形,比如我们要画下面这个图形: 对应的AS3代码为: package { import flash.display.Sprite; public class Arrow extends Sprite { public f...
885 0
|
vr&ar 内存技术
Flash/Flex学习笔记(23):运动学原理
先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class Ball extends Sprite{ private var radius:Number ;//半径 pri...
823 0
|
vr&ar 内存技术
Flash/Flex学习笔记(42):坐标旋转
坐标旋转是个啥概念呢? 如上图,(蓝色)小球 绕某一中心点旋转a角度后,到达(红色)小球的位置,则红色小球相对中心点的坐标为: x1 = dx * cos(a) - dy * sin(a) y1 = dy * cos(a) + dx * sin(a)  这个就是坐标旋转公式,如果要反向旋转,则公式要修正一下,有二种方法:   1.
819 0
|
索引 容器 内存技术
Flash/Flex学习笔记(52):使用TweenLite
TweenLite是第三方出品的专用于各种缓动动画的类库,其性能据说已经超过了Adobe官方的Tween. 从网上找到了一篇中文的说明文档:http://files.cnblogs.com/yjmyzz/tweenLite%e4%b8%ad%e6%96%87%e6%89%8b%e5%86%8c%e4%b8%8e%e5%8f%82%e6%95%b0%e8%af%b4%e6%98%8e.
971 0

热门文章

最新文章