數位媒體。筆記

站內搜尋

Sunday, 23 August 2009

AS3: ColorMatrixFilter

Matrix矩陣
[a, b, c, d, e, f, g, h, i]

通常以下列形式表現
[ a, b, c,
d, e, f,
g, h, i ]

four good reasons to use the transformation matrix:
  • Skewing is not available in ActionScript outside of the transformation matrix
  • BitmapData requires a transformation matrix to transform drawn bitmaps
  • You can use a transformation matrix to encapsulate information about how to transform a MovieClip/BitmapData instance and then use it over and over again
  • You can concatenate matrices to combine their geometric effects

There are four basic ways to transform a MovieClip/BitmapData instance:

  • Translation: The values "tx" and "ty" in Figure 3 represent the x and y translation values, respectively, in pixels.
  • Scale: The values "a" and "d" represent the x and y scale values, respectively. A value of 1 indicates 100% of scale.
  • Skew: The values "b" and "c" represent the y and x skew values, respectively. A value of 0 indicates no skew, while a value of 1 indicates a skew value equal to the width or height of the object at a scale of 1.
  • Rotation: The values "a", "b", "c", and "d" can be used in combination to affect the rotation of an object. For an angle "q", rotation is achieved in the matrix by using the following values:

    a = cos(q)
    b = sin(q)
    c = –sin(q)
    d = cos(q)

e.g.
import flash.geom.Matrix;
// Scale to 200% and move to _x = 100 and _y = 50:
var m:Matrix = new Matrix( 2,0,0,2,100,50 );
clip.transform.matrix = m;

-----------------
Matrix.concat 方法
可将某个矩阵与当前矩阵连接,从而将这两个矩阵的几何效果有效地结合在一起

Additionally, the Matrix class implements methods that make it easy to apply transformation changes to the matrix. These include the following:

  • Matrix.translate(tx:Number, ty:Number)
  • Matrix.scale(sx:Number, sy:Number)
  • Matrix.rotate(angle:Number)
  • Matrix.createBox(scaleX:Number, scaleY:Number, rotation:Number, tx:Number, ty:Number)
颜色矩阵(ColorMatrixFilter)
ColorMatrixFilter accepts a 4 x 5 matrix (20-element array).


Note that the source and result values for each channel range between 0 and 255.

To change the brightness of an image, you need to change the value of each color channel by an equal amount. The simplest way to do this is to offset the source value in each channel.


Increasing the brightness


To apply matrices in Flash:(doubles the amount of green)
import flash.filters.ColorMatrixFilter;  var mat:Array = [ 1,0,0,0,0,     0,2,0,0,0,     0,0,1,0,0,     0,0,0,1,0 ]; var colorMat:ColorMatrixFilter = new ColorMatrixFilter(mat); clip.filters = [colorMat]; 
Color Matrix Demo

No comments:

Post a Comment