Using Flash as to realize the effect of the mouse drawing circle

Mouse

In Flash or Photoshop can easily draw a circle or ellipse, how to do a work, so that users can directly drag the mouse to draw a circle or oval? The following is the BREAKDS use as to achieve this effect of the explanation--

Preview:

First, the basic definition: Although we do not say that everyone is clear, but I would like to talk about, lest some people forget almost ~ ~

Circle: The path from the plane to the fixed-point distance equals the point of the fixed length.
Ellipse: The trajectory of a point from the plane up to two fixed-point distance and equal to the fixed length (fixed length greater than the distance between two fixed points).

Second, the problem description: Draw circles and ellipses, using as.

Third, the problem analysis:

1. Round
Oh, most people see after definitely think: hum ~ this is not simple, is not the description of the method? Know the equation on the line ~ Well, the use of equations to trace points, is a good way, I did so. But--(Declare: If you are using Curveto, another matter)
We can improve the way the circle is drawn:
First of all, in order to better write concise code, we should not adopt the ordinary equation, but should adopt the parametric equation:

　　x = Rxcos (a) y = Rxsin (a) where a is a parameter.

Then, very important point, about the time complexity, this has to be considered: If a This parameter we do a stroke when the use of increment of 0.01 to do 2pi/0.01 times strokes, quite large. If this happens every time, it's obviously not very good (maybe some people can accept it, but I'm often used to not tolerate such a time complexity). So we can think: what is the difference between a circle and a circle? Yes, the RADIUS, the center position. Well, it's a good run. We can use the strokes to draw a circle there is a MC (of course, you can also use the mouse to draw a MC), and then copy and adjust the okay. This is an important thought.

2. Ellipse:
The standard equation for a circle is x^2+y^2 = r^2, and the ellipse is x^2/a^2+y^2/b^2=1. For a point on a circle (represented by a parametric equation):

　　(Rxcos (a), Rxsin (a)) where A is a parameter.

(Kxxrxcos (a), Kyxrxsin (a))if we compress (or enlarge) The x direction by the coefficient kx, the y direction is compressed (or enlarged) by the coefficient Ky. So this point will be on x^2/(KXXR) ^2+y^2/(KYXR) ^2 = 1, then the trajectory of such a point is an ellipse!!!
This proves that the shape of the compressed circle is an ellipse!!
In this way, we can use the _xscale and _yscale of the round MC that we copied to make it become the desired ellipse! How nice! ~
It's a lot quicker to draw circles and ellipses.

Four, code Analysis

function Circleforbase () {//To draw the MC of the base circle, all subsequent circles or ellipses are copied by this circle _root.createemptymovieclip ("Circle", 0);//Create an empty MC circle . LineStyle (1, 0x000000, 100); The property of the set line var th = 0;//This is the parameter that uses the circle's parametric equation to draw a circle ~ each time with step to add the var steps = 0.01;//The length of the parameter, that is, every 0.01 radians strokes a Point with (circle) {moveTo (100, 0);//move to the point at the far right of the circle you want to draw the value of do {th + = step;//parameter increased lineTo (Ma Th.cos (TH) *100, math.sin (TH) *100);//by Parametric equation of while (th<=math.pi*2);//stop when the parameter equals 2PI, just a circle _visible = 0;//will The Painted circle is set to "invisible"}}circleforbase ()//Draw a base round MC, notice this base round MC name is called Circlen = 0;//the number of circles to represent the state of the mouse, 1 indicates the status of the mice, 0 the opposite STX = 0;sty = 0;enx = 0;eny = 0;//Ellipse will be contained within a rectangle, the above four variables represent the two vertices on the diagonal of the rectangle, so that the rectangle can be determined function DrawOval (sx,sy,ex,ey,n) {//The method of drawing a circle/ellipse, in fact, the first four parameters determine a rectangle, but note that only the logical rectangle,//We do not draw it out, just inside its range to paint the ellipse, The following comment describes what this 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;//sets the axis length of the ellipse parallel to the x-axis _yscale = Math.Abs (ey-sy)/2;//sets the half axis length of the ellipse parallel to the y axis _x = 0.5* (Sx+ex); Its center x-coordinate is the x-coordinate of the midpoint of the rectangle's diagonal _y = 0.5* (Sy+ey);//Its center y coordinate is the y-coordinate of the midpoint of the diagonal of the rectangle}}_root.onmousedown = function () {f = 1; STX = _root._xmouse; Sty = _root._ymouse; n++;//every time the mouse presses, the F value is assigned 1, a vertex of the rectangle is the coordinates of the mouse down, ready to draw the nth ellipse. }_root.onmouseup = function () {f=0;//Mouse is released, F is assigned 0 so that the ellipse}_root.onmousemove = function () {if (f) {//When the mouse moves, if the mouse presses Executes the code (that is, redrawing the nth ellipse) Enx = _root._xmouse; Eny = _root._ymouse;//Determines the rectangle that defines the ellipse (the rectangle with the edge parallel to the axis) DrawOval (stx,sty,enx,eny,n);//Redraw the nth ellipse in the rectangle that is determined by the parameter

　　SOURCE download