The ability value graph drawing of imitation palm Hero League

First, FrontierI believe that you can play with the friends of the hand of the Palm League app's ability value bar ~ ~ Well, don't remember it's okay I'll give you a picture!!
so today I'll take a moment to imitate:as usual, a gif, a picture of the truth.
here is my Weibo account I would like to focus on Kazakhstan:Email:[email protected]Github:https://github.com/icuihai.Weibo:http://weibo.com/icuihaitwo. thecustom controls are often used when working on a project, saving time by using a wheel made by someone else, but as an elegant programmermust learn to build wheels for others to use, as the saying goes not to force that with salted fish what difference ~ ~, this article is not a wheel, just a small custom view, with some relatively basic knowledge, hope to help beginners, It is also hoped that Daniel will find errors in order to correct them or to suggest better idear.we can see from the GIF picture is basically in the point of view and draw line, so that want to be a qualified programmer, the basic skills of mathematics is solid enough ~ ~1, we use this is a seven-side shape, so we analyze the first draw a line, and then let its rotation can get seven, the effect is as follows
I go, it's so ugly ... where the two main APIs are called

Canvas.drawLinecanvas.rotate

after drawing the line, we will then connect the outer ring together to form a closed graph.

after that, we have a lot of deformation in the painting, in this demo we only draw a 1/2 inner polygon in order to save time ,Finally, we are connected by the value of the Seekbar on the edge of the point;nonsense not much to say, directly on the code:2,myview

public class MyView extends view{private int startx=720,starty=200;//start point private int centerx=720,centery=600;//Center    private int r=centery-starty;//radius private string[]str= {"Kill", "survive", "assists", "physics", "Magic", "defense", "Money"};    private int dimension;//literal size private float xa,xb,xc,xd,xe,xf,xg;//x axis coordinates private float ya,yb,yc,yd,ye,yf,yg;//y axis coordinates    private static final int textsize=20; Private float y1,y2,y3,y4,y5,y6,y7,x1,x2,x3,x4,x5,x6,x7;//capacity value coordinates private float pre1=0.2f,pre2=0.2f,pre3=0.2f,pre4=    0.2f,pre5=0.2f,pre6=0.2f,pre7=0.2f;//Percentage Public MyView (context context) {this (context,null);    } public MyView (context context, AttributeSet Attrs) {This (context, attrs,0);        } public MyView (context context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);        Initview ();        TypedArray typedarray=context.obtainstyledattributes (attrs,r.styleable.textsize); Dimension = (int) typedarray.getdimension (r.styleable.textsize_tExtsize, TEXTSIZE);    Typedarray.recycle (); } @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {super.onmeasure (widthmeas    Urespec, Heightmeasurespec);    } private void Initview () {initdata (); }

The above is mainly the construction method, and some constants, center coordinates I did not adapt to the screen, but according to my simulator to choose a approximate value, if you want to do it directly call the Windowmanger window manager, or rewrite onmeasure () Method can get the width of the view to make adjustments,3, aim.

private void InitData () {//First point coordinates (not actually used) Xa=startx;        Ya=starty;        The coordinate xb= (float) (Centerx+math.sin (Math.toradians (360/7)) *r) of the B point is calculated first;        yb= (float) (Centery-math.cos (Math.toradians (360/7)) *r);        The C-point coordinate xc= (float) (Startx+math.sin (Math.toradians (360/7*1.5)) *r) is calculated;        Yc= (float) (Centery+math.cos (Math.toradians (360/7*1.5)) *r);        LOG.I ("TAG", "+xc+"---"+yc);        The D-Point coordinate xd= (float) (Startx+math.sin (Math.toradians (360/7/2)) *r) is calculated;        Yd= (float) (Centery+math.cos (Math.toradians (360/7/2)) *r);        e-point coordinate xe= (float) (Centerx-math.sin (Math.toradians (360/7/2)) *r) at D-point horizontal symmetry;        Ye= (float) (Centery+math.cos (Math.toradians (360/7/2)) *r);        Coordinates f xf= (float) (Centerx-math.sin (Math.toradians (360/7*1.5)) *r) with the C-point horizontal symmetry point;        yf= (float) (Centery+math.cos (Math.toradians (360/7*1.5)) *r);        Coordinates g xg= (float) (Centerx-math.sin (Math.toradians (360/7)) *r) with the B-point horizontal symmetry point; Yg= (float) (centery-math.cOS (Math.toradians (360/7)) *r); }

We aim at the point is based on the angle of the drawing, there should be other methods, pathmeasure this class should have API can be drawn, interested students can go to study, the top of the point is the top of that point, and then clockwise to this downward,4, Connection (outer polygon)

@Override    protected void OnDraw (canvas canvas) {        super.ondraw (canvas);        Canvas.save ();        Paint paint=new paint ();        Paint.setcolor (color.green);        Paint.setstrokewidth (2);        for (int i = 0; i < 7; i++) {            canvas.drawline (startx,starty,centerx,centery,paint);            Canvas.rotate ((float) 360/7,centerx,centery);        }        Canvas.restore ();        Draw the straight line between AB        Canvas.drawline (startx,starty,xb,yb,paint);        Draw a straight line between BC        Canvas.drawline (xb,yb,xc,yc,paint);        Draw a straight line between BD        Canvas.drawline (xc,yc,xd,yd,paint);        Draw a straight line between de        Canvas.drawline (xd,yd,xe,ye,paint);        Draw a straight line between EF        canvas.drawline (xe,ye,xf,yf,paint);        Draw the straight line between FG        Canvas.drawline (xf,yf,xg,yg,paint);        Draw a straight line between FA        Canvas.drawline (xg,yg,startx,starty,paint);

The point has been meow OK next must be to put these points serialized together, code comments are very clear, right ~ ~ Note These are the most outer polygons

5, line (in-picture polygon)

Multi-deformation        canvas.drawline (STARTX,CENTERY-R/2, (XB+STARTX)/2,yb+ (CENTERY-YB)/2,paint) in the painting;        Canvas.drawline ((XB+STARTX)/2,yb+ (CENTERY-YB)/2, (STARTX+XC)/2, (CENTERY+YC)/2,paint);        Canvas.drawline ((STARTX+XC)/2, (CENTERY+YC)/2, (STARTX+XD)/2, (Centery+yd)/2,paint);        Canvas.drawline ((STARTX+XD)/2, (Centery+yd)/2, (STARTX+XE)/2, (Centery+ye)/2,paint);        Canvas.drawline ((Startx+xe)/2, (Centery+ye)/2, (STARTX+XF)/2, (CENTERY+YF)/2,paint);        Canvas.drawline ((STARTX+XF)/2, (CENTERY+YF)/2, (STARTX+XG)/2, (CENTERY+YG)/2,paint);        Canvas.drawline ((STARTX+XG)/2, (CENTERY+YG)/2,startx,centery-r/2,paint);        Canvas.drawline ((STARTX+XG)/2, (CENTERY+YG)/2,startx,centery-r/2,paint);

6, dynamic drawing of graphics

Clockwise x1=startx in turn;        Y1= (centery-(pre1*r));        X2= (float) (Startx+math.sin (Math.toradians (360/7)) *pre2*r);        Y2= (float) (Centery-math.cos (Math.toradians (360/7)) *pre2*r);        x3= (float) (Startx+math.sin (Math.toradians (180-360/7*2)) *pre3*r);        y3= (float) (Centery+math.cos (Math.toradians (180-360/7*2)) *pre3*r);        x4= (float) (Startx+math.sin (Math.toradians (180-360/7*3)) *r*pre4);        y4= (float) (Centery+math.cos (Math.toradians (180-360/7*3)) *r*pre4);        x5= (float) (Centerx-math.sin (Math.toradians (180-360/7*3)) *r*pre5);        y5= (float) (Centery+math.cos (Math.toradians (180-360/7*3)) *r*pre5);        x6= (float) (Centerx-math.sin (Math.toradians (180-360/7*2)) *r*pre6);        y6= (float) (Centery+math.cos (Math.toradians (180-360/7*2)) *r*pre6);        x7= (float) (Centerx-math.sin (Math.toradians (360/7)) *r*pre7);        y7= (float) (Centery-math.sin (Math.toradians (90-360/7)) *r*pre7); Mpath.moveto (X7,Y7);//Setting the starting point to 7 points allows the graphic to be closed Mpath.lineto (x1, y1);        Mpath.lineto (X2,Y2);        Mpath.lineto (X3,Y3);        Mpath.lineto (X4,Y4);        Mpath.lineto (X5,Y5);        Mpath.lineto (X6,Y6);        Mpath.lineto (X7,Y7);        Draw Path Canvas.drawpath (MPath, mpaint); Mpath.close (); Closed curve invalidate ();

The pre represents Seekbar sliding values/maximums because I used Mpath.moveto (X7,Y7), so it is not necessary to call Mpath.close (), it is possible to line up the lines together to form a closed graph, note that these are to use the float value, Because most of these angles are float values, if you use int will make the picture appear to have a certain deviation, I also cut a wrong picture people look carefully there is a difference:

Well, basically that, the other code I will not post it, otherwise it looks too long, the complete code I will put on GitHub, Https://github.com/icuihai/LolCustomView, like can give a star, thank

The ability value graph drawing of imitation palm Hero League