Using Matrix objects. Adobe Flex, FLEX 2-PROGRAMMING ACTIONSCRIPT 3.0

Finding unions and intersections of Rectangle objects

You use the union() method to find the rectangular region formed by the boundaries of two rectangles: import flash.display.*; import flash.geom.Rectangle; var rect1:Rectangle = new Rectangle(0, 0, 100, 100); trace(rect1); // (x=0, y=0, w=100, h=100) var rect2:Rectangle = new Rectangle(120, 60, 100, 100); trace(rect2); // (x=120, y=60, w=100, h=100) trace(rect1.union(rect2)); // (x=0, y=0, w=220, h=160)

You use the intersection() method to find the rectangular region formed by the overlapping region of two rectangles: import flash.display.*; import flash.geom.Rectangle; var rect1:Rectangle = new Rectangle(0, 0, 100, 100); trace(rect1); // (x=0, y=0, w=100, h=100) var rect2:Rectangle = new Rectangle(80, 60, 100, 100); trace(rect2); // (x=120, y=60, w=100, h=100) trace(rect1.intersection(rect2)); // (x=80, y=60, w=20, h=40)

You use the intersects() method to find out whether two rectangles intersect. You can also use the intersects() method to find out whether a display object is in a certain region of the Stage. For example, in the following code, assume that the coordinate space of the display object container that contains the circle object is the same as that of the Stage. The example shows how to use the intersects() method to determine if a display object, circle , intersects specified regions of the Stage, defined by the target1 and target2 Rectangle objects: import flash.display.*; import flash.geom.Rectangle; var circle:Shape = new Shape(); circle.graphics.lineStyle(2, 0xFF0000); circle.graphics.drawCircle(250, 250, 100); addChild(circle); var circleBounds:Rectangle = circle.getBounds(stage); var target1:Rectangle = new Rectangle(0, 0, 100, 100); trace(circleBounds.intersects(target1)); // false var target2:Rectangle = new Rectangle(0, 0, 300, 300); trace(circleBounds.intersects(target2)); // true

Similarly, you can use the intersects() method to find out whether the bounding rectangles of two display objects overlap. You can use the getRect() method of the

DisplayObject class to include any additional space that the strokes of a display object may add to a bounding region.

422 Working with Geometry

Other uses of Rectangle objects

Rectangle objects are used in the following methods and properties:

Class

BitmapData

DisplayObject

PrintJob

Sprite

TextField

Transform

Methods or properties Description applyFilter(), colorTransform(), copyChannel(), copyPixels(), draw(), fillRect(), generateFilterRect(), getColorBoundsRect(), getPixels(), merge(), paletteMap(), pixelDissolve(), setPixels(), and threshold()

Used as the type for some parameters to define a region of the

BitmapData object.

getBounds(), getRect(), scrollRect, scale9Grid addPage() startDrag() getCharBoundaries()

Used as the data type for the property or the data type returned.

Used to define the printArea parameter.

Used to define the bounds parameter.

Used as the return value type.

pixelBounds Used as the data type.

Using Matrix objects

The Matrix class represents a transformation matrix that determines how to map points from one coordinate space to another. You can perform various graphical transformations on a display object by setting the properties of a Matrix object, applying that Matrix object to the matrix property of a Transform object, and then applying that Transform object as the transform property of the display object. These transformation functions include translation

( x and y repositioning), rotation, scaling, and skewing.

Using Matrix objects 423

Defining Matrix objects

Although you could define a matrix by directly adjusting the properties ( a , b , c , d , tx , ty ) of a

Matrix object, it is easier to use the createBox() method. This method includes parameters that let you directly define the scaling, rotation, and translation effects of the resulting matrix.

For example, the following code creates a Matrix object that has the effect of scaling an object horizontally by 2.0, scaling it vertically by 3.0, rotating it by 45 degrees, moving (translating) it 10 pixels to the right, and moving it 20 pixels down: var matrix:Matrix = new Matrix(); var scaleX:Number = 2.0; var scaleY:Number = 3.0; var rotation:Number = 2 * Math.PI * (45 / 360); var tx:Number = 10; var ty:Number = 20; matrix.createBox(scaleX, scaleY, rotation, tx, ty);

You can also adjust the scaling, rotation, and translation effects of a Matrix object by using the scale() , rotate() , and translate() methods. Note that these methods combine with the values of the existing Matrix object. For instance, the following code sets a Matrix object that scales an object by a factor of 4 and rotates it 60 degrees, since the scale() and rotate() methods are called twice: var matrix:Matrix = new Matrix(); var rotation:Number = 2 * Math.PI * (30 / 360); // 30° var scaleFactor:Number = 2; matrix.scale(scaleFactor, scaleFactor); matrix.rotate(rotation); matrix.scale(scaleX, scaleY); matrix.rotate(rotation); myDisplayObject.transform.matrix = matrix;

To apply a skew transformation to a Matrix object, adjust its b or c property. Adjusting the b property skews the matrix vertically, and adjusting the c property skews the matrix horizontally. The following code skews the myMatrix Matrix object vertically by a factor of 2: var skewMatrix:Matrix = new Matrix(); skewMatrix.b = Math.tan(2); myMatrix.concat(skewMatrix);

You can apply a Matrix transformation to the transform property of a display object. For example, the following code applies a matrix transformation to a display object named myDisplayObject : var matrix:Matrix = myDisplayObject.transform.matrix; var scaleFactor:Number = 2; var rotation:Number = 2 * Math.PI * (60 / 360); // 60° matrix.scale(scaleFactor, scaleFactor);

424 Working with Geometry

matrix.rotate(rotation); myDisplayObject.transform.matrix = matrix;

The first line sets a Matrix object to the existing transformation matrix used by the myDisplayObject display object (the matrix property of the transformation property of the myDisplayObject display object). This way, the Matrix class methods that you call will have a cumulative effect on the display object’s existing position, scale, and rotation.

The ColorTransform class is also included in the flash.geometry package. This class is used to set the colorTransform property of a Transform object. Since it does not apply any sort of geometrical transformation, it is not discussed in this chapter. For more information, see the ColorTransform class in the ActionScript 3.0 Language

Reference .

Defining a Matrix object for use with a gradient

■

■

■

■

You use the beginGradientFill() and lineGradientStyle() methods of the flash.display.Graphics class to define gradients for use in shapes. When you define a gradient, you supply a matrix as one of the parameters of these methods.

The easiest way to define the matrix is by using the createGradientBox() method, which defines a rectangle that is used to define the gradient. You define the scale, rotation, and position of the gradient by using the parameters passed to the createGradientBox() method.

For example, consider a gradient with the following characteristics:

GradientType.LINEAR

Two colors, green and blue, with the ratios array set to [0, 255]

SpreadMethod.PAD

InterpolationMethod.LINEAR_RGB

Using Matrix objects 425

The following examples show gradients in which the rotation parameter of the createGradientBox() method differs as indicated, but all other settings stay the same: width = 100; height = 100; rotation = 0; tx = 0; ty = 0; width = 100; height = 100; rotation = Math.PI/4; // 45° tx = 0; ty = 0; width = 100; height = 100; rotation = Math.PI/2; // 90° tx = 0; ty = 0;

426 Working with Geometry