Flash drawing API: Taiji

I remembered a pattern a few days ago, so I had an inspiration and recorded the pen. However, when I encountered some problems, I could not draw the plot. I would like to ask my college students, he used C ++ to draw a pie chart. At the beginning, the following figure can be drawn by drawing several circles. However, when we find that there is a problem with the fill color, we have to change our thinking, the original technique was to change the big circle into the slices on both sides. From this, we were inspired to use the slices to draw half the circles. Then the problem of filling images is solved. The key point is to achieve a sector. Draw through API. However, the API provided by as3 does not have a method for creating a sector chart. After a wide range of online data queries, it was easily modified.

The initial idea is to know how to draw a slice: Let's simply write it to achieve the effect of slice.

View plaincopy to clipboardprint?

1. Function pie (G: graphics, startangle: Number, endangle: Number, radius: Number, color: uint): void
2. {
3. G. linestyle (1 );
4. G. moveTo (0, 0 );
5. G. beginfill (color );
6. For (var I: Number = startangle; I <= endangle; I ++)
7. {
8. VaR angle: Number = I * Math. PI/180;
9. VaR pointx: Number = math. Cos (angle) * radius;
10. VaR pointy: Number = math. Sin (angle) * radius;
11. G. lineto (pointx, pointy );
12. }
13. G. lineto (0, 0 );
14. G. endfill ();
15. }

The parameters include graphic objects, start angles, end angles, radius, and color fill values. In this way, we can basically achieve the expected results.

This method achieves the effect of Slice by drawing points.

After implementation, we continue to follow the following pattern to describe the circle. There are 5 circles in total, and the largest circle is completed by two slices. Others are filled by drawing API drawcircl.

When filling the color, the key point is to deal with the color, in order to achieve the Taiji pattern.

Rows graph row class:

Draw based on the above diagram.

View plaincopy to clipboardprint?

1. Package
2. {
3. // Draw Tai Chi
4. Import flash. display. Sprite;
5. Import flash. Events .*;
6. Import flash. display. graphics;
7. Import flash. Geom. Point;
9. Public class Taiji extends Sprite
10. {
11. Private var shape: SPRITE = new sprite ();
12. Private var contain: SPRITE = new sprite ();
13. Private var shape2: SPRITE = new sprite ();
14. Private var shape3: SPRITE = new sprite ();
15. Private var R: int; // radius
16. Private var startx: Number = 0;
17. Private var starty: Number = 0;
18. Public Function Taiji (r: INT)
19. {
20. This. r = R;
21. Addchild (SHAPE );
22. Shape. x = startx;
23. Shape. Y = starty;
24. Addchild (shape2 );
25. Addchild (shape3 );
26. Creatsprite ();
27. }
28. Private function creatsprite (): void
29. {
30. Pie (shape. Graphics, 90,270, R, 0x000000); // draw the left side of the slice
31. Pie (shape. Graphics, 270,450, R, 0 xffffff); // draw the right side of the slice
33. Shape2.graphics. beginfill (0 xffffff); // draw the lower circle
34. Shape2.graphics. drawcircle (startx, starty + R/2, R/2 );
35. Shape2.graphics. endfill ();
37. Shape2.graphics. beginfill (0x000000); // draw the Upper circle
38. Shape2.graphics. drawcircle (startx, starty-r/2, R/2 );
39. Shape2.graphics. endfill ();
41. Shape3.graphics. beginfill (0 xffffff );
42. Shape3.graphics. drawcircle (startx, starty-r/2, R/4 );
43. Shape3.graphics. endfill ();
45. Shape3.graphics. beginfill (0x000000 );
46. Shape3.graphics. drawcircle (startx, starty + R/2, R/4 );
47. Shape3.graphics. endfill ();
50. }
51. // Draw slices
52. Private function pie (G: graphics, startangle: Number, endangle: Number, radius: Number, color: uint): void
53. {
54. G. linestyle (1 );
55. G. moveTo (0, 0 );
56. G. beginfill (color );
57. For (var I: Number = startangle; I <= endangle; I ++)
58. {
59. VaR angle: Number = I * Math. PI/180;
60. VaR pointx: Number = math. Cos (angle) * radius;
61. VaR pointy: Number = math. Sin (angle) * radius;
62. G. lineto (pointx, pointy );
63. }
64. G. lineto (0, 0 );
65. G. endfill ();
66. }
67. }
68. }

Test code: Add a luminous filter effect to the code.

View plaincopy to clipboardprint?

1. Package
2. {
3. // Draw Tai Chi
4. Import flash. display. movieclip;
5. Import flash. Events .*;
6. Import flash. display. Bitmap;
7. Import flash. display. bitmapdata;
8. Import flash. Geom .*;
9. Import flash. Filters. glowfilter; // Add a luminous filter.
10. Public class main2 extends movieclip
11. {
12. Private var R: Int = 120;
13. Private var contain: movieclip = new movieclip ();
14. Public Function main2 ()
15. {
16. Creatsprite ();
17. }
18. Private function creatsprite (): void
19. {
20. Addchild (contain );
21. VaR sprite: Taiji = new Taiji (r); // create a taiji object
22. Contain. addchild (sprite );
23. Contain. x = stage. stagewidth/2;
24. Contain. Y = stage. stageheight/2;
25. VaR glow: glowfilter = new glowfilter (0 xffffff, 0.3, 60, 60, 3); // luminous Filter
26. VaR array: array = new array ();
27. Array. Push (glow );
28. Contain. Filters = array;
29. }
30. }
31. }

To add some effects, we can also add filter effects to the image and import the filter package. Use glowfilter to add a filter light to it

VaR glow: glowfilter = new glowfilter (0 xffffff, 0.3, 60, 60, 3); // luminous Filter
VaR array: array = new array ();
Array. Push (glow );
Contain. Filters = array;

Luminous filter, which can achieve good results.

Similarly, in order to add interesting meanings, we searched online for some pictures of our hands and then made them with two verses, which looked cool.

The second version.