Android Canvas exercise (5) Area Chart)

I only wanted to do two hands-on exercises and then quickly crossed the Canvas. I have never been very interested in this part. However, after drawing two figures recently, I suddenly found that those very common pictures in the past

Table, think about it. If you don't want to emphasize versatility, you don't need to consider some special effects. The light chart itself is easy to draw. This is a great attempt to entertain yourself.

No, I drew another Area Chart and used drawLine and Path to implement transparency.

As follows:

As for how to implement it, the main principle is to add transparency to the Path. Transparency is calculated based on a formula, and the more transparent the subsequent formula is,

The sense of attention comes out. For details, see my code implementation.

Package com. xcl. canvas04;/*** Canvas exercise * Area Chart ** author: xiongchuanliang * date: 2014-4-8 */import android. OS. bundle; import android. annotation. suppressLint; import android. app. activity; import android. content. context; import android. content. res. resources; import android. graphics. canvas; import android. graphics. color; import android. graphics. paint; import android. graphics. paint. style; import android. graphics. path; import android. util. displayMetrics; import android. view. menu; import android. view. view; @ SuppressLint ("NewApi") public class MainActivity extends Activity {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // setContentView (R. layout. activity_main); setContentView (new PanelAreaChart (this);} @ Override public boolean onCreateOptionsMenu (Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater (). inflate (R. menu. main, menu); return true;} class PanelAreaChart extends View {private int ScrHeight; private int ScrWidth; private Paint [] arrPaint; private Paint PaintText = null; final int [] colors = new int [] {R. color. red, R. color. blue, R. color. green, R. color. yellow, R. color. red1, R. color. green1, R. color. dark1, R. color. blue1, R. color. blue2, R. color. blue3, R. color. white ,}; // Area chart shows the proportions used. In actual use, the private final int arrNumArea [] [] = {40, 60, 70, 60, 50,60 },{ 30,40, 50,40, 40,50 },{ 20,50, 30,40, 30,20}}; public PanelAreaChart (Context context) {super (context); // solve canvas versions earlier than 4.1. drawTextOnPath () does not display the problem this. setLayerType (View. LAYER_TYPE_SOFTWARE, null); // display information DisplayMetrics dm = getResources (). getDisplayMetrics (); ScrHeight = dm. heightPixels; ScrWidth = dm. widthPixels; arrPaint = new Paint [8]; Resources res = this. getResources (); for (int I = 0; I <8; I ++) {arrPaint [I] = new Paint (); arrPaint [I]. setColor (res. getColor (colors [I]); arrPaint [I]. setStyle (Paint. style. FILL); arrPaint [I]. setStrokeWidth (4);} PaintText = new Paint (); PaintText. setColor (Color. BLUE); PaintText. setTextSize (22);} public void onDraw (Canvas canvas) {// canvas background Canvas. drawColor (Color. WHITE); // the title of the pie chart canvas. drawText ("Area Chart", PaintText); arrPaint [0]. setTextSize (25); arrPaint [3]. setTextSize (25); arrPaint [0]. setStyle (Paint. style. FILL_AND_STROKE); arrPaint [0]. setAlpha (50); int I = 0; int lnWidth = 10; // string width int lnSpace = 50; // string spacing int startx = 70; int endx = startx + 20; int starty = ScrHeight/2 + 150; int endy = ScrHeight/2 + 150; int initX = startx; int initY = starty; int HLength = ScrWidth-10; // horizontal line width // Area Chart /////// ////////////////// Y axis identification line and value int yCount = 9; for (I = 0; I
 
  
Done.
  

  
Additional links:
  
Android Canvas exercise (1) Draw a report
  

  
Android Canvas exercise (2) Self-painted pie chart
  
Android Canvas exercise (3) Self-painted column chart
  
Android Canvas exercise (4) Self-drawing line chart
  


  
MAIL: xcl_168@aliyun.com
  
BLOG: http://blog.csdn.net/xcl168