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轴上的扭曲。

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;   
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOSer成长记录

OpenGL ES(三) 纹理

1545
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(五)transform

transform 字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:移动 translate,缩放scale,旋转rotate,翻转...

1372
来自专栏Linux驱动

30.QT-渐变之QLinearGradient、 QConicalGradient、QRadialGradient

1505
来自专栏python3

tkinter -- Scale

创建一个垂直 Scale,最大值为100,最小值为0,步距值为1。这个参数设置也就是 Scale的缺省设置了

963
来自专栏Android知识点总结

Android关于Path你所知道的和不知道的一切

3476
来自专栏偏前端工程师的驿站

CSS魔法堂:你真的懂text-align吗?

前言 也许提及text-align你会想起水平居中,但除了这个你对它还有多少了解呢?本篇打算和大家一起来跟text-align来一次负距离的交往,你准备好了吗?...

2267
来自专栏天天P图攻城狮

Android OpenGL开发实践 - 基于OpenGL ES 2.0的Android相机实时图片涂鸦实现思路

这篇文章将给大家讲解如何在Android系统上基于OpenGL ES 2.0来实现相机实时图片涂鸦效果,所涂内容跟随人脸出现、消失、移动、旋转及缩放,在这里,我...

1.5K13
来自专栏hbbliyong

Opencv-python画图基础知识

2515
来自专栏章鱼的慢慢技术路

Python中的高级turtle(海龟)作图(续)

4135
来自专栏向治洪

自定义绘制柱形图

设计思路: 1.画柱状图  2.画竖线  3.画顶部横线  4.画文字 1.画柱状图 画柱状图的方法很简单,就是使用canvas.drawRect...

2377

扫码关注云+社区

领取腾讯云代金券