Add up Flash (6)

Introduced

Demonstrates using Flash ActionScript 3.0 to draw some basic graphics and to make some basic transformations on drawing or other visual objects

Paint-executes vector drawing commands through the graphics property of a Shape object

1, using LineStyle () to define the line style of paint

2, MoveTo ()-Set the current painting point; LineTo ()-Draws a line to the target point with the current defined line style, starting at the current drawing point, Curveto ()-Specifies the control point and end point of the two Bezier curve to complete the drawing of the curve; DrawRect ()- Draw a rectangle; Drawcircle ()-Draw a circle; DrawEllipse ()-Draw an ellipse;

3, Beginfill () and Endfill () are used to populate the shapes drawn between them. If it is a gradient fill, the corresponding method is Begingradientfill and Endfill ()

Conversion-Converts an object by setting its Transform.matrix property

Matrix.rotate ()-Angle of rotation

Matrix.translate ()-The distance of the translation

Matrix.scale ()-scaling ratio

MATRIX.B-vertically Tilt The matrix

MATRIX.C-Tilt The matrix horizontally

1. Drawing

Put 8 Button on the UI

The names were: Btnline, Btncurve, Btnrectangle, Btncircle, Btnellipse, Btnliner, Btnradial, Btnclea

For demonstration: Draw a straight line, draw a curve, draw a rectangle, draw a circle, draw an ellipse, linear gradient fill, a radioactive gradient fill, clear the graphic

Main.as

Package
{
Import Flash.display.MovieClip;
Import fl.events.ComponentEvent;
Import fl.events.SliderEvent;
Import Flash.display.Shape;
Import Flash.geom.Matrix;
Import Flash.display.GradientType;
Import Flash.display.SpreadMethod;

public class Main extends MovieClip
{
var Originalmatrix:matrix;

Public Function Main (): void
{
Btnline.addeventlistener (Componentevent.button_down, drawLine);
Btncurve.addeventlistener (Componentevent.button_down, DrawCurve);
Btnrectangle.addeventlistener (Componentevent.button_down, DrawRectangle);
Btncircle.addeventlistener (Componentevent.button_down, drawcircle);
Btnellipse.addeventlistener (Componentevent.button_down, DrawEllipse);
Btnliner.addeventlistener (Componentevent.button_down, drawlinergradient);
Btnradial.addeventlistener (Componentevent.button_down, drawradialgradient);
Btnclear.addeventlistener (Componentevent.button_down, cleargraphics);
}


Draw a straight line
function DrawLine (e:componentevent): void
{
LineStyle ()-Define line style for paint
First argument: line weight, integer (0-255)
Second parameter: The color value of the line (16)
Third parameter: Opacity (0-1)
Canvas.graphics.lineStyle (0x000000);

MoveTo ()-Sets the current drawing point. In this case, the starting point of the line.
Canvas.graphics.moveTo (0, 0);

LineTo ()-Draws a line to the target point with the currently defined line style, starting at the current drawing point
Canvas.graphics.lineTo (100, 100);
}

Draw Curve (two times Bezier curve)
function DrawCurve (e:componentevent): void
{
Canvas.graphics.lineStyle (1, 0x000000);
Canvas.graphics.moveTo (100, 0);

Curveto ()-Specifies the control point and end point of the two Bezier curve to complete the drawing of the curve
The first two parameters are control points, the last two are the endpoints, and the current drawing point is the starting point
Canvas.graphics.curveTo (100, 100, 200, 200);
}

Draw a rectangle
function DrawRectangle (e:componentevent): void
{
Canvas.graphics.lineStyle (5, 0xff0000);

DrawRect ()-Draw Rectangle
First parameter: The x-coordinate of the upper-left corner of the rectangle
The second argument: the y-coordinate of the upper-left corner of the rectangle
Third parameter: width of the rectangle
Fourth parameter: The height of the rectangle
Canvas.graphics.drawRect (200, 0, 100, 50);
}

Draw a Circle
function Drawcircle (e:componentevent): void
{
Canvas.graphics.lineStyle (1, 0x000000);

Beginfill ()-monochrome fills the drawing after this until the Endfill () is called
Two parameters are filled with color values and opacity respectively
Canvas.graphics.beginFill (0xff0000, 0.5);

Drawcircle ()-Draw a circle
Three parameters are the x coordinates of the center, the y coordinate of the center, the radius of the circle.
Canvas.graphics.drawCircle (300, 0, 30);

Endfill ()-renders the fill effect of the graph drawn between Beginfill () and Endfill ()
Canvas.graphics.endFill ();
}

Draw an Ellipse
function DrawEllipse (e:componentevent): void
{
Canvas.graphics.lineStyle (1, 0x000000);
Canvas.graphics.beginFill (0xff0000);

DrawEllipse ()-Draw ellipse
First two parameters: X-coordinate and y-coordinate of the left vertex of the ellipse
The latter two parameters: the width and height of the ellipse
Canvas.graphics.drawEllipse (0, 200, 100, 50);

Canvas.graphics.endFill ();
}

Linear gradient Fill
function Drawlinergradient (e:componentevent): void
{
Canvas.graphics.lineStyle (1, 0x000000);

Declare an affine matrix matrices
var Gradientboxmatrix:matrix = new Matrix ();

Creategradientbox ()-a method specifically provided for gradient fills in the Matrix
Three parameters are the width of the gradient box, the height of the gradient box, and the rotation radian of the gradient box
Gradientboxmatrix.creategradientbox (50, 20, 0);

Begingradientfill ()-Make a gradient fill
First parameter: Gradient mode. Gradienttype.linear is a linear gradient; gradienttype.radial is a radioactive gradient.
Second parameter: An array of color values for gradient colors
Third parameter: An opacity array of gradient colors
Fourth parameter: The gradient color's distribution scale array (0-255). 0 is the leftmost of the gradient box, and 255 is the rightmost of the gradient box
Fifth parameter: Gradient box generated with Matrix.creategradientbox ()
Sixth parameter: Stretching mode
Spreadmethod.pad-fills the remaining space with the color value at the end of the linear gradient line
Spreadmethod.reflect-Adjacent fill area, repeat gradient in reverse direction until fill fills the remaining space
Spreadmethod.repeat-Adjacent fill area, repeat the gradient in the same direction until fill fills the remaining space
Canvas.graphics.beginGradientFill (Gradienttype.linear, [0xff0000, 0X0000FF], [1, 1], [0, 255], Gradientboxmatrix, Spreadmethod.repeat);

Canvas.graphics.drawRect (100, 200, 100, 20);
Canvas.graphics.endFill ();
}

Radioactive gradient Fill
function Drawradialgradient (e:componentevent): void
{
Canvas.graphics.lineStyle (1, 0x000000);
var Gradientboxmatrix:matrix = new Matrix ();
Gradientboxmatrix.creategradientbox (50, 20, 0);

Gradienttype.radial-Radioactive gradient
Canvas.graphics.beginGradientFill (gradienttype.radial, [0xff0000, 0X0000FF], [1, 1], [0, 255], Gradientboxmatrix, Spreadmethod.reflect);

Canvas.graphics.drawCircle (200, 200, 30);
Canvas.graphics.endFill ();
}

Clear Graphics
function Cleargraphics (e:componentevent): void
{
Clear ()-Clears the graphics on the Graphics and resets settings such as line styles and fills
Canvas.graphics.clear ();
}
}
}