Javascript-arrange DIV elements by circle (1) -- Analysis

:

 

I. Analysis diagram:

Inside the Green Border: The DIV element of the outer layer, which is relatively positioned;

White Circle frame: the imaginary shape of the secondary analysis;

White point: the center point of the White Circle, center point, point O;

Circular angle: nog;

Yellow: The DIV elements that need to be arranged in circles and absolutely positioned;

RED: coordinates of each yellow Div, that is, the elements, left values, and top values of absolute positioning;

 

 

 

Ii. Concepts involved:

2.1. radians:Radians are the measurement units of the angle.

(The red part is the arc length, and angle A is the circle angle corresponding to the arc length.)

The arc with the arc length equal to the radius, and its right center angle is 1 radian. (That is, the two rays are shot from the center of the center to the circumference, forming an arc with a positive angle and an angle. When the arc length is equal to the circle radius, the angle between the two rays is 1 ).

According to the definition, the radians of a week are 2 π R/r = 2 π, 360 ° angle = 2 π radians. Therefore,About 1 radian °, That is, 57 ° 17' 44. 806 '', 1 ° is π/180 radian, the approximate value is 0.01745 radian, the circumference is 2 π radians, the horizontal angle (I .e. 180 ° angle) is π radians, And the right angle is π/2 radian.

Arc Length = n2 π R/360 (Here, n is the arc length corresponding to angle n .)

========================================================== ======================

2.2. Sine value: the string value is a value in a right triangle. The length of the opposite side is longer than that of the top oblique side.

Math. Sin (x): X is required. ARadians. Multiply the angle by 0.017453293 (2PI/360) to a radian.

 

========================================================== ==========

2.3. cosine value: the ratio of the adjacent edge of the acute angle to the oblique edge of the right triangle.

Math. Sin (x): X is required. ARadians. Multiply the angle by 0.017453293 (2PI/360) to a radian.

 

Iii. Requirement Analysis:

3.1 arrange these yellow divs on the circumference of the same circle

3.2 The layout is evenly distributed.

 

Iv. Principle Analysis:

To arrange the DIV to form a circle, the essence is to set the relationship between the left value and the top value of each Div, so that the relationship between the values is set according to the Circular law;

What is the law of the circle 4.1?

Is Pi (circumference rate). If any value is multiplied by this Pi and then multiplied by 2, a circle is obtained. This "any value" is the radius of the obtained circle. The larger the value, the larger the circle.

4.2 How to find the relationship between left and top values of each div?

The coordinates of the red points in the upper left corner of each yellow Div are left and top values. To make this red point distributed on the circumference, then left and top must be associated with this pi. Only pi can have circles.

 

V. instance analysis

I want to get the coordinate value of the red dot, that is, the left and top values of the DIV,

Left = NG + o x coordinate (left)

Top = on + or's ordinate value (top)

Therefore, it is required that the right triangle of each right triangle with the center o as the vertex and the circular radius as the oblique edgeValue of two straight angle Edges. (Length values of on and NG line segments in the middle blue right triangle)

In the semi-circular shape, when the center angle increases and the radius remains unchanged, the value of the bottom edge will become larger;

Sine formula: sin (x) = the opposite side/oblique side X becomes larger, and the oblique side remains unchanged (RADIUS), then the opposite side (NG line segment in) will become larger;

The remainder formula cos (x) = the adjacent side/oblique side X becomes larger, and the oblique side remains unchanged (RADIUS), so the adjacent side (Middle On Line Segment) becomes smaller;

The orthodox value of 270 degrees is negative 1;

The cosine of 180 is negative 1;

5.1 set a circle first

RADIUS: 200px;

5.2 mean the circumference of this circle

Suppose we have eight divs to evenly distribute on the circumference with a radius of PX. So here we use the angle to go to the average (the arc division, the average, and the like should all be divided through the angle );

Average: The total angle of the circular heart angle is 360 degrees, with an average of 8 parts, that is, 360/8. In this way, the arc lengths and radians of each round angle after the split are equal.

5.3 obtain the length value of Ng, that is, the left value of Div, that is, the abscissa value of the red point;

The sine function is used to evaluate this value;

Formula math. Sin (x) = right side/oblique side;

We need to know X, and we need to know the oblique edge. Then we can find the "edge" value, that is, the length value of NG;

5.3.1 here, X is a radian, that is, the number of degrees. As mentioned in the above definition, radians represent the number of degrees;

According to the formula: multiply the number of degrees by PI/180, that is, the number of radians; that is, x = (360/8) * PI/180

The calculated x is the number of radians after the circle is evenly divided;

5.3.2 oblique side, that is, the radius of the circle, that is, 200;

5.3.3 "edge" value, that is, the length value of NG;

Deformation according to the above formula:Edge(NG)= Math. Sin (x) * Oblique Edge

That is, the edge (NG) = math. Sin (x) * 200 = math. Sin (360/8) * PI/180) * 200;

NowEdge (NG)The value of, that is, the abscissa value of the red point, that isLeft value of DVI;

5.4 obtain the straight angle edge corresponding to each circle angle, that is, the length value of the opposite side.

Because every circle angle is evenly divided, multiply by a multiple to obtain the radian value corresponding to the circle angle, that is, the angle value.

Here, the DIV index is used as a multiple, and the value is multiplied by X to obtain the radian value of each center angle after each evenly divided operation;

Edge = math. Sin (x * index) * 200;

【Edge] Value is used as the left value of the div;

The top value of the 5.5 Div, that is, the length value of the on line segment

The above four points have the same principle, but the sine value is changed to the cosine value.

Adjacent edge (on) = math. Cos (x * index) * 200;

Set this value to the top value of the div;

Based on the above analysis:CodeAs shown in the following figure, you can sort the DIV by a circle.

//RadiusVaRRadius = 1, 200;//Angle of each box;VaRAVD = 360/$ (". Box"). length;//Radians corresponding to each box;VaRAHD = AVD * Math. PI/180;$ (". Box"). Each (Function(Index, element) {$ (This).Css ({"Left": Math. Sin (AHD * index) * radius, "TOP": Math. Cos (AHD * index ))*Radius });});
 

 

5.6 set the position of the circle

The position of the circle is determined based on the coordinates of the center of the circle, so we just need to set the coordinates of the center of the circle, Left top

The coordinate of the center of the circle changes, so the Left top of the corresponding Div should also change;

For example, left: 100px in the center, top: 100px in the center;

The left and top values of each Div should also be added:

The Code is as follows:

$ ( Function  (){  //  Center X-axis          VaR Dotleft = ($ (". Container"). Width ()-$ (". Dot"). Width ()/2; //  Center ordinate         VaR Dottop = ($ (". Container"). Height ()-$ (". Dot"). Height ()/2; //  Starting Angle          VaR Stard = 0 ;  //  Radius          VaR Radius = 1, 200 ;  //  Angle of each box;          VaR AVD = 360/$ (". Box"). length; //  Radians corresponding to each box;         VaR AHD = AVD * Math. PI/180; //  Set the center point of the circle $ (". Dot" ).css ({"Left": dotleft, "TOP" : Dottop}); $ ( ". Box"). Each ( Function  (Index, element) {$ (  This ).Css ({"Left": Math. Sin (AHD * index) * radius + dotleft, "TOP": Math. Cos (AHD * index) * radius + Dottop });});}) 

 

Summary:

6.1 When It Comes To curves or arcs, use angle or radians to analyze and find associations;

6.2 find a link or a proportion. If the value and value are a relational relationship, multiply or divide it by a multiple. (for example, a magnifier previously written uses a proportional relationship );

7. The previous understanding is incorrect. I have updated the analysis image and analysis. Thank you."String "! Prompt ~

Download demo