简单控制绘制图形的平移、旋转、缩放

阳光灿烂

前两天在网上看到一个效果，好久没有写AS了，有一种实现的冲动。这效果在FLASH中建几个元件后再用代码稍加控制应该容易实现。

我实现的方式是自定义矩阵在即时渲染中管理每个图形的平移、旋转、缩放，在一个Shape实例中画出所有图形，这种实现方式对矩阵不熟悉的朋友应该有帮助。自定义的矩阵没有写成类的形式，方便不熟悉类的朋友理解，写成了几个函数。代码直接粘在主场景第一帧就能看到效果。实现代码如下：

import flash.display.Shape;
import flash.display.Graphics;
import flash.events.Event;
var w:Number = 100;
var h:Number = 100;
var sw:Number = stage.stageWidth;
var sh:Number = stage.stageHeight;
var shape:Shape = new Shape();
var g:Graphics = shape.graphics;
addChild(shape);
function createRect(x0: Number, y0: Number, w: Number, h: Number):Array
{
return [x0, y0, x0 + w, y0, x0 + w, y0 + h, x0, y0 + h];
}

function transformPoints(m: Array, arr: Array):void
{
var l:int = arr.length;
if (l % 2 == 0)
{
  for (var k: int = 0; k < l; k += 2)
  {
   var v0:Array = [arr[k],arr[k + 1]];
   var v1:Array = transformPoint(m,v0);
   arr[k] = v1[0];
   arr[k + 1] = v1[1];
  }
}
}
function drawRect(g: Graphics, rect: Array, color:uint):void
{
g.beginFill(color);
g.moveTo(rect[0], rect[1]);
g.lineTo(rect[2], rect[3]);
g.lineTo(rect[4], rect[5]);
g.lineTo(rect[6], rect[7]);
g.endFill();
}
var angle:Number = 0.05;
addEventListener(Event.ENTER_FRAME, drawing);
function drawing(e: Event):void
{
g.clear();
//m为父矩阵，控制绕舞台中心旋转，m0,m1,m2,m3,m4为m的子矩阵，分别控制5个矩形的平移，旋转，缩放
var m:Array=identity();
   m=rotate(m,angle);
   m = translate(m,sw / 2,sh / 2);
//-----------大----------------
var rect0:Array = createRect(0,0,w,h);
var m0:Array = identity();
m0 = translate(m0, -  w/2, -  h/2);
m0 =scale(m0, 2, 2);
m0=multiply(m0,m)
transformPoints(m0,rect0);
drawRect(g,rect0,0xff0000);
//---------左上-----------
var rect1:Array = createRect(0,0,w ,h );
var m1:Array = identity();
m1 = translate(m1, -  w , -  h );
m1 =scale(m1, 0.5, 0.5);
m1 = rotate(m1,Math.cos(angle*2.5))
m1 = translate(m1, -  w , -  h );
m1=multiply(m1,m)
transformPoints(m1,rect1);
drawRect(g,rect1,0x00ffff);
//----------右上----------
var rect2:Array = createRect(0,0,w,h );
var m2:Array = identity();
m2 = translate(m2,0, -  h );
m2 =scale(m2, 0.5, 0.5);
m2 = rotate(m2,Math.sin(angle*2.5));
m2 = translate(m2, w , - h);
m2=multiply(m2,m)
transformPoints(m2,rect2);
drawRect(g,rect2,0x00ff00);
//--------右下------------
var rect3:Array = createRect(0,0,w ,h );
var m3:Array = identity();
//m3 = translate(m3, 0,0);
m3 =scale(m3, 0.5, 0.5);
m3 = rotate(m3,Math.cos(angle*2.5));
m3 = translate(m3, w , h);
m3=multiply(m3,m)

transformPoints(m3,rect3);
drawRect(g,rect3,0x00ffff);
//----------左下----------
var rect4:Array = createRect(0,0,w,h);
var m4:Array = identity();
m4 = translate(m4, -  w ,0);
m4 =scale(m4, 0.5, 0.5);
m4 = rotate(m4,Math.sin(angle*2.5));
m4 = translate(m4, -w ,h);
m4=multiply(m4,m)
transformPoints(m4,rect4);
drawRect(g,rect4,0x00ff00);
angle +=  0.05;
}
function identity():Array
{
return [
       1, 0, 0,
       0, 1, 0,
       0, 0, 1,
     ];
}
function multiply(a:Array, b:Array):Array
{
var b00:Number = b[0];
var b01:Number = b[1];
var b02:Number = b[2];
var b10:Number = b[3];
var b11:Number = b[4];
var b12:Number = b[5];
var b20:Number = b[6];
var b21:Number = b[7];
var b22:Number = b[8];
var a00:Number = a[0];
var a01:Number = a[1];
var a02:Number = a[2];
var a10:Number = a[3];
var a11:Number = a[4];
var a12:Number = a[5];
var a20:Number = a[6];
var a21:Number = a[7];
var a22:Number = a[8];
return [
       a00 * b00 + a01 * b10 + a02 * b20,
       a00 * b01 + a01 * b11 + a02 * b21,
       a00 * b02 + a01 * b12 + a02 * b22,
       a10 * b00 + a11 * b10 + a12 * b20,
       a10 * b01 + a11 * b11 + a12 * b21,
       a10 * b02 + a11 * b12 + a12 * b22,
       a20 * b00 + a21 * b10 + a22 * b20,
       a20 * b01 + a21 * b11 + a22 * b21,
       a20 * b02 + a21 * b12 + a22 * b22,
     ];

}
function translation(tx:Number, ty:Number):Array
{
return [
       1, 0, 0,
       0, 1, 0,
       tx, ty, 1,
     ];
}
function translate(m:Array, tx:Number, ty:Number):Array
{
return multiply(m, translation(tx, ty));
}
function rotating(angleInRadians:Number):Array
{
var c:Number = Math.cos(angleInRadians);
var s:Number = Math.sin(angleInRadians);
return [
       c, -s, 0,
       s, c, 0,
       0, 0, 1,
     ];
}
function rotate(m:Array, angleInRadians:Number):Array
{
return multiply(m, rotating(angleInRadians));
}
function scaling(sx:Number, sy:Number):Array
{
return [
       sx, 0, 0,
       0, sy, 0,
       0, 0, 1,
     ];
}
function scale(m, sx:Number, sy:Number):Array
{
return multiply(m, scaling(sx, sy));
}
function transformPoint(m:Array, v:Array):Array
{
var v0:Number = v[0];
var v1:Number = v[1];
return [v0 * m[0] + v1 * m[3 ] + m[6],
       v0 * m[1] + v1 * m[4] + m[7]];
}

阳光灿烂

1. 
   

复制代码

时光清浅

阳光灿烂

自己顶一下。

冬冬

哇！好神奇！学习了！