Flash drawing API: Taiji

Source: Internet
Author: User

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

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.