Android Custom view--Polygon Mesh Property Map

Polygon Mesh Property Map

Pre-stated:

This view involves the use of the path class, if you are unfamiliar with the path class, you can see http://blog.sina.com.cn/s/blog_4d9c3fec0102vyhs.html, this article is easy to understand

The view also involves mathematical cos and sin, which is the basic knowledge of some circles, and if not, please fill in high school knowledge.

：

Step One: Analyze variable information

//-------------we have to give the analog data-------------the//n edge private int    n = 5;    Text private string[] Text = new string[]{"Physical attack", "magical attack", "defensive ability", "Getting Started", "range"};    Zone level, value cannot exceed N-shape number private int[] area = new int[]{4, 1, 3, 2, 1};    -------------View-related-------------//view own width and height private int mheight;        private int mwidth;    -------------Brush-related-------------//Border brush private Paint borderpaint;    The brush of the text private paint textpaint;    Brush for area private paint areapaint;    -------------polygon-dependent-------------//n number of edges private int num = 5;    The radius between two polygons is private int r = 50;    N Edge shape vertex coordinates private float x, y;    N-Edge angle private float angle = (float) ((2 * Math.PI)/n);    The margin level of the text and border, the larger the value, the smaller the margin, the less the private int textAlign = 5;    -------------Color-related-------------//border color private int mcolor = 0xff000000;    Text color private int textcolor = 0xffff0000; Zone color private int areacolor = 0X800000FF; 

bask in the beauty of my paintings to help understand:

If you want to switch to 5, 6, 7 edges, and so on, you must modify these data:

    -------------we have to give the analog data-------------    //n-Edge    private int n = 5;    Text    private string[] Text = new string[]{"Physical attack", "magical attack", "defensive ability", "Getting Started", "range"};    Zone level, value cannot exceed N-shape number    private int[] area = new int[]{4, 1, 3, 2, 1};

Step Two: Get the width and height of the view

    Public Mypolygonview (Context context) {        super (context);    }    Public Mypolygonview (context context, AttributeSet Attrs) {        Super (context, attrs);    }    Public Mypolygonview (context context, AttributeSet attrs, int defstyleattr) {        Super (context, attrs, defstyleattr); c8/>}    @Override    protected void onsizechanged (int w, int h, int oldw, int oldh) {        super.onsizechanged (w, H, O LDW, OLDH);        Mwidth = W;        Mheight = h;    }
Step three: Implement the OnDraw method to do our drawing
    @Override    protected void OnDraw (canvas canvas) {        super.ondraw (canvas);        Initializes the brush        initpaint ();        The canvas moves to the center point        canvas.translate (MWIDTH/2, MHEIGHT/2);        Draw N-edged        DrawPolygon (canvas);        Draws a line        drawLine (canvas) of the midpoint to the vertex of the N-edged shape;        Draw Text        drawText (canvas);        Draw Blue Area        Drawarea (canvas);    }
    /** * Initialization brush */private void Initpaint () {//Border brush borderpaint = new Paint ();        Borderpaint.setantialias (TRUE);        Borderpaint.setstyle (Paint.Style.STROKE);        Borderpaint.setcolor (Mcolor);        Borderpaint.setstrokewidth (3);        Text Brush textpaint = new Paint ();        Textpaint.settextsize (30);        Textpaint.setcolor (TextColor);        Textpaint.setantialias (TRUE);        Area Brush Areapaint = new Paint ();        Areapaint.setcolor (Areacolor);        Areapaint.setantialias (TRUE);    Areapaint.setstyle (Paint.Style.FILL_AND_STROKE); /** * Draw Polygon * * @param canvas */private void DrawPolygon (canvas canvas) {Path PATH = new        Path ();            n the number of edges for (int j = 1; j <= Num; j + +) {Float R = j * THIS.R;            Path.reset ();                Draw N-side for (int i = 1; I <= n; i++) {x = (float) (Math.Cos (i * angle) * r); y = (float) (MATH.SIn (i * angle) * r);                if (i = = 1) {Path.moveto (x, y);                } else {Path.lineto (x, y); }}//close the current profile.            If the current point is not equal to the outline of the first point, a line segment is automatically added Path.close ();        Canvas.drawpath (path, borderpaint); }}/** * Draw Polygon Segment * * @param canvas */private void DrawLine (canvas canvas) {Path PATH = n        EW Path ();        float r = num * THIS.R;            for (int i = 1; I <= n; i++) {path.reset ();            x = (float) (Math.Cos (i * angle) * r);            y = (float) (Math.sin (i * angle) * r);            Path.lineto (x, y);        Canvas.drawpath (path, borderpaint); }}/** * Draw text * * @param canvas */private void DrawText (canvas canvas) {FLOAT R = num *        THIS.R;            for (int i = 1; I <= n; i++) {//Measure text width high rect rect = new rect (); Textpaint.gettextbounds (Text[i-1], 0, TexT[i-1].length (), rect);            float textWidth = Rect.width ();            float textHeight = Rect.height ();            x = (float) (Math.Cos (i * angle) * r);            y = (float) (Math.sin (i * angle) * r);            Position trimmer if (x < 0) {x = X-textwidth;            } if (Y >) {y = y + textHeight;            }//Adjust text with border margin float lastx = x + x/num/textalign;            float lasty = y + y/num/textalign;        Canvas.drawtext (Text[i-1], LASTX, Lasty, Textpaint); }}/** * Draw area * * @param canvas */private void Drawarea (canvas canvas) {Path PATH = new        Path ();  for (int i= 1; i<= N;            i++) {Float r = area[i-1] * THIS.R;            x = (float) (Math.Cos (i * angle) * r);            y = (float) (Math.sin (i * angle) * r);            if (i = = 1) {Path.moveto (x, y); } else {Path.lineto (x, y); }}//close the current profile.        If the current point is not equal to the outline of the first point, a line segment is automatically added Path.close ();    Canvas.drawpath (path, areapaint); }
Step four: Analyze the drawing process of the above code
Thinking Analysis:
1, start painting before: We have to get the brush ready, here to see the code can understand the meaning, and then the entire view of the center of gravity point of the picture to the view of our entire width of the midpoint, so that the beginning of the painting (0,0) point in this view of the midpoint.
2, Draw N-side shape: The first layer of the loop is to draw the number of N-shaped, the second loop is the process of drawing n-shaped, we explain the second layer of the loop. First, through the angle (angle) can find our N-shape vertex, using the high school knowledge. The path is then moved to a vertex (Path.moveto), then the next vertex (Path.lineto) is connected as a straight line, and finally (Path.close) automatically close the last edge. Remember, after drawing an n-side shape, remember (path.reset), let the beginning of path back (0,0).
3, Draw N-shape to the line between the vertices: this is not difficult to understand, here is not much to say.
4, Draw red text: Here is the implementation of the method we can achieve their own, where to see your personal hobbies, if there is a better way please leave a message, thank you. My method here is to measure the width of each string first, as long as the way to move a vertex of the string to the N-side vertex coincident, do not occupy the grid position, and then all outward diffusion.
To bask in my beautiful illustrations:
5, the painting area: According to the drawing of the polygon can understand the drawing area, just to change its r to the desired value of the region, here is not too much introduction.
Finally offer this kind of source code: source Download
      
public class Mypolygonview extends View {//-------------we must give the analog data-------------the//n edge private int n = 5;    Text private string[] Text = new string[]{"Physical attack", "magical attack", "defensive ability", "Getting Started", "range"};    Zone level, value cannot exceed N-shape number private int[] area = new int[]{4, 1, 3, 2, 1};    -------------View-related-------------//view own width and height private int mheight;    private int mwidth;    -------------Brush-related-------------//Border brush private Paint borderpaint;    The brush of the text private paint textpaint;    Brush for area private paint areapaint;    -------------polygon-dependent-------------//n number of edges private int num = 5;    The radius between two polygons is private int r = 50;    N Edge shape vertex coordinates private float x, y;    N-Edge angle private float angle = (float) ((2 * Math.PI)/n);    The margin level of the text and border, the larger the value, the smaller the margin, the less the private int textAlign = 5;    -------------Color-related-------------//border color private int mcolor = 0xff000000;    Text color private int textcolor = 0xffff0000;    Zone color private int strengthcolor = 0X800000FF; Public MypolygonviEW (Context context) {super (context);    } public Mypolygonview (context context, AttributeSet Attrs) {Super (context, attrs); } public Mypolygonview (context context, AttributeSet attrs, int defstyleattr) {Super (context, Attrs, defstyleat    TR); } @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW,        OLDH);        Mwidth = W;    Mheight = h;        } @Override protected void OnDraw (canvas canvas) {super.ondraw (canvas);        Initializes the brush initpaint ();        The canvas moves to the center point Canvas.translate (MWIDTH/2, MHEIGHT/2);        Draw N-edged DrawPolygon (canvas);        Draws a line drawLine (canvas) of the midpoint to the vertex of the N-edged shape;        Draw Text DrawText (canvas);    Draw Blue Area drawarea (canvas);        }/** * Initialization brush */private void Initpaint () {//Border brush borderpaint = new Paint ();        Borderpaint.setantialias (TRUE);  Borderpaint.setstyle (Paint.Style.STROKE);      Borderpaint.setcolor (Mcolor);        Borderpaint.setstrokewidth (3);        Text Brush textpaint = new Paint ();        Textpaint.settextsize (30);        Textpaint.setcolor (TextColor);        Textpaint.setantialias (TRUE);        Area Brush Areapaint = new Paint ();        Areapaint.setcolor (Strengthcolor);        Areapaint.setantialias (TRUE);    Areapaint.setstyle (Paint.Style.FILL_AND_STROKE); /** * Draw Polygon * * @param canvas */private void DrawPolygon (canvas canvas) {Path PATH = new        Path ();            n the number of edges for (int j = 1; j <= Num; j + +) {Float R = j * THIS.R;            Path.reset ();                Draw N-side for (int i = 1; I <= n; i++) {x = (float) (Math.Cos (i * angle) * r);                y = (float) (Math.sin (i * angle) * r);                if (i = = 1) {Path.moveto (x, y);                } else {Path.lineto (x, y);            }            }Closes the current profile.            If the current point is not equal to the outline of the first point, a line segment is automatically added Path.close ();        Canvas.drawpath (path, borderpaint); }}/** * Draw Polygon Segment * * @param canvas */private void DrawLine (canvas canvas) {Path PATH = n        EW Path ();        float r = num * THIS.R;            for (int i = 1; I <= n; i++) {path.reset ();            x = (float) (Math.Cos (i * angle) * r);            y = (float) (Math.sin (i * angle) * r);            Path.lineto (x, y);        Canvas.drawpath (path, borderpaint); }}/** * Draw text * * @param canvas */private void DrawText (canvas canvas) {FLOAT R = num *        THIS.R;            for (int i = 1; I <= n; i++) {//Measure text width high rect rect = new rect ();            Textpaint.gettextbounds (Text[i-1], 0, Text[i-1].length (), rect);            float textWidth = Rect.width ();            float textHeight = Rect.height ();            x = (float) (Math.Cos (i * angle) * r); y = (float) (MaTh.sin (i * angle) * r);            Position trimmer if (x < 0) {x = X-textwidth;            } if (Y >) {y = y + textHeight;            }//Adjust text with border margin float lastx = x + x/num/textalign;            float lasty = y + y/num/textalign;        Canvas.drawtext (Text[i-1],lastx, Lasty, Textpaint); }}/** * Draw area * * @param canvas */private void Drawarea (canvas canvas) {Path PATH = new        Path ();  for (int i= 1; i<= N;            i++) {Float r = area[i-1] * THIS.R;            x = (float) (Math.Cos (i * angle) * r);            y = (float) (Math.sin (i * angle) * r);            if (i = = 1) {Path.moveto (x, y);            } else {Path.lineto (x, y); }}//close the current profile.        If the current point is not equal to the outline of the first point, a line segment is automatically added Path.close ();    Canvas.drawpath (path, areapaint); }}

Android Custom view--Polygon Mesh Property Map