Use flash as to draw circles with the mouse

In FLASH or PHOTOSHOP, you can easily draw a circle or an ellipse. How can you create a work so that you can drag the mouse inside to draw a circle or an ellipse? The following is an explanation of BreakDS's use of AS to achieve this effect --

Preview:

I. basic definition: although everyone knows it, I 'd like to talk about it so that some people may not forget it ~~

Circle: the trajectory of a point with a fixed distance from a plane to a fixed point.
Elliptic: the trajectory of the point from the plane to the distance between two fixed points and the point equal to the fixed length (fixed length between two fixed points.

Ii. Problem description: circle and elliptic, using.

Iii. Problem Analysis:

1. Circle
Haha, most people will definitely think after seeing it: Hum ~ This is not simple. Isn't it just the method of plotting? Just know the equation ~ Well, it is a good method to use equations for plotting. I did the same at the beginning. But -- (First Declare: If you use curveTo, let alone)
We can improve the method of circle painting:
First, in order to better write concise code, we should not use ordinary equations, but parameter equations:

X = r × cos (a) y = r × sin ()A is the parameter.

Next, it is very important to consider the time complexity. If we use the parameter a to describe the point with an increment of 0.01, we need to perform 2 PI/0.01 points, very large. If this happens every time, it is obviously not very good (maybe some people can accept it, but I often get used to being unable to tolerate such time complexity ). So we can think: what is the difference between the circle and the circle? By the way, the radius is the center of the circle. So, it's easy. We can first draw a circle in a mc (of course we can also draw a mc with the mouse), and then copy and adjust it to OKay. This is an important idea.

2. elliptic:
The standard equation of the circle is x ^ 2 + y ^ 2 = r ^ 2, while the elliptic is x ^ 2/a ^ 2 + y ^ 2/B ^ 2 = 1. For a point on the circle (represented by a parameter equation ):

(R × cos (a), r × sin ())A is the parameter.

If we compress (or expand) The x direction by the coefficient kx and compress (or expand) The y direction by the coefficient ky(Kx X r X cos (a), ky X r x sin ()). In this case, this point must be on x ^ 2/(kx x r) ^ 2 + y ^ 2/(ky x r) ^ 2 = 1, the trajectory of such a point is an elliptic !!!
This proves that the image obtained by compressing the circle is an elliptic !!
In this way, we can use the _ xscale and _ yscale of the copied circle mc to make it an elliptical! How nice !~
So circle and ellipse will be much faster.

Iv. Code Parsing

Function circleforbase () {// mc used to draw the base circle. All the circles or ovans in the future are copied from this circle to _ root. createEmptyMovieClip ("circle", 0); // create an empty mc circle. lineStyle (1, 0x000000,100); // sets the line property var th = 0; // This is the parameter that uses the circular parameter equation to draw the circle ~ Add var step = 0.01 by step each time; // The parameter step, that is, draw a point with (circle) {moveTo (0.01 radian, 0) at intervals of 100 ); // move to the do {th + = step on the rightmost side of the circle to be drawn; // The lineTo (Math. cos (th) * 100, Math. sin (th) * 100); // draw by parameter equation} while (th <= Math. PI * 2); // when the parameter is equal to 2 PI, it is stopped, just a circumference _ visible = 0; // set this circle to "invisible"} circleforbase (); // draw a base circle mc. Note that the mc name of the Base circle is circlen = 0; // It indicates the number of circles f = 0; // It indicates the mouse state, 1 indicates that the instance is in the pressed state. The opposite value is "0". stx = 0; sty = 0; enx = 0; eny = 0; // the ellipse is contained in a rectangle, the preceding four variables represent the two vertices on the diagonal line of the rectangle.
Function drawoval (sx, sy, ex, ey, n) {// Method for drawing circles/ovans. In fact, the first four parameters determine a rectangle, but you must note that it is only a logical rectangle. // we do not draw it, but just draw the ellipse within its range, the comment below will explain what the rectangle looks like _ root. circle. duplicateMovieClip ("cir" + n, n); // copy a standard circle (the base mc with a radius of 100) with (_ root ["cir" + n]) {_ xscale = Math. abs (ex-sx)/2; // you can specify the length of the half-axis parallel to the x-axis of an elliptic. _ yscale = Math. abs (ey-sy)/2; // set the length of the half axis parallel to the Y axis of the elliptic _ x = 0.5 * (sx + ex ); // Its center x coordinate is the x coordinate of the midpoint of the diagonal line of the rectangle _ y = 0.5 * (sy + ey ); // Its center y coordinate is the y coordinate of the midpoint of the diagonal line of the rectangle.} _ root. onMouseDown = Function () {f = 1; stx = _ root. _ xmouse; sty = _ root. _ ymouse; n ++; // when the mouse is pressed, the F value is assigned to 1, and a vertex of the rectangle is the coordinate when the mouse is pressed. Prepare to draw the nth elliptic .} _ Root. onMouseUp = function () {f = 0; // when the mouse is released, f is assigned to 0, so that when the mouse moves, it will not continue to draw an ellipse} _ root. onMouseMove = function () {if (f) {// when the mouse moves, if you press the mouse to execute the code (that is, re-draw the nth ellipse) enx = _ root. _ xmouse; eny = _ root. _ ymouse; // determine the rectangle (the side is parallel to the coordinate axis) drawoval (stx, sty, enx, eny, n) of the elliptic tangent ); // re-draw the nth ellipse in the rectangle determined by the parameter }}

Source code download