蜘蛛网属性图形控件

掌上英雄联盟app，有玩lol游戏的人应该都用过它，app里面查看能力的图形，用到了一个挺不错的属性图形，一个自定义控件，今天项目完成差不多，有空来模仿一下这个控件。

先看一下效果图，这个图，分析一下，

先绘制4个背景（4个7变形）

绘制线条

绘制文字

绘制属性

有7种属性，是一个正七边行，我的思路是，可以拆分为4个不同半径的7边行，其中圆形是一样的，然后7边行的几个顶点坐标，可以理由圆形，边长，角度来，理由sin和cos，把顶点坐标算出来，用path绘制一个7边行

源码如下：大致思路都写了注释

package test.interest.com.listviewedittest;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

/**
 * 英雄联盟属性图
 * Created by Administrator on 2015/9/15 0015.
 */
public class MyView extends View {

    Double[] num = new Double[]{0.8,0.4,0.7,0.8,0.9,0.45,0.6};//属性值
    private String[] text = new String[]{"击杀","生存","助攻","物理",
            "魔法","防御","金钱"};

    //文本大小
    private float mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics());
    private float linesize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, getResources().getDisplayMetrics());

    private int mPadding;
    private int mRadius;
    private int mCenter;
    private RectF mRange;       //绘制范围
    private Paint limep;
    private Paint textpant;     //文字画笔



    private Paint attrPaint;        //属性画笔
    private Paint p;                //区域画笔

    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);
        init();
    }

    private void init() {
        // 创建画笔
        textpant = new Paint();
        textpant.setColor(Color.parseColor("#4588C3"));// 设置红色
        textpant.setAlpha(100);        //透明的0-255
        textpant.setAntiAlias(true); // 是否抗锯齿
        textpant.setTextSize(mTextSize);   //字体大小

        attrPaint = new Paint();
        attrPaint.setTextSize(linesize);
        attrPaint.setDither(true);
        attrPaint.setAntiAlias(true); // 是否抗锯齿
        attrPaint.setStrokeWidth(5.0f);//线条加粗
        attrPaint.setColor(Color.RED);

        limep = new Paint();
        limep.setTextSize(linesize);
        limep.setAntiAlias(true); // 是否抗锯齿
        attrPaint.setAntiAlias(true); // 是否抗锯齿
        limep.setDither(true);
        limep.setStrokeWidth(2.0f);//线条加粗
        limep.setColor(Color.parseColor("#B8C6EE"));

        p = new Paint();
        p.setAntiAlias(true); // 是否抗锯齿
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = Math.min(getMeasuredWidth(),getMeasuredHeight());

        System.out.println("测量宽高:"+widthMeasureSpec+"-----"+heightMeasureSpec);

        mPadding = getPaddingLeft(); //以left为准
        mRadius = width/4;//半径大小，可自定义
        mCenter = width/2;    //中心点
        setMeasuredDimension(width, width);//强制设置为正方形
    }


    @Override
    protected void onDraw(Canvas canvas) {
        System.out.println("test:onDraw绘制开始");
        super.onDraw(canvas);
        mRange = new RectF(mPadding,mPadding,mPadding+mRadius,mPadding+mRadius);
        drawduobianxin(canvas);
    }




    /**
     * 绘制主方法
     * @param canvas
     */
    private void drawduobianxin(Canvas canvas){
        int w = mRadius/4;
        drawpath("#DBE1F1",mRadius,canvas);
        drawpath("#A5B3DB",w*3,canvas);
        drawpath("#788BBF",w*2,canvas);
        drawpath("#3C5293", w * 1, canvas);
        // #A5B3DB   #788BBF #3C5293
        drawline(canvas);
        drawAttr(canvas, num);
    }

    /**
     * 绘制颜色块
     * @param color
     * @param w
     * @param canvas
     */
    private void drawpath(String color,int w,Canvas canvas){

        double r = Math.PI * 2 / 7 ;       //每份的角度
        // 绘制这个三角形,你可以绘制任意多边形
        Path path = new Path();
        //中心坐标
        path.moveTo(mCenter, mCenter);// 此点为多边形的起点
        p.setColor(Color.parseColor(color));// 设置红色
        path.lineTo(mCenter, mCenter - w);
        for (int i=1;i<7;i++){
            //左边1
            double xz1 = w * Math.sin(r*i);
            double yz1 = w * Math.cos(r*i);
            path.lineTo((int) (mCenter + xz1), (int) (mCenter - yz1));
        }
        path.lineTo(mCenter, mCenter - w);
        path.close(); // 使这些点构成封闭的多边形
        canvas.drawPath(path, p);
    }

    /**
     * //绘制线条
     * @param canvas
     */
    private void drawline(Canvas canvas){

        double textpanding = 1.3;
        double r = Math.PI * 2 / 7 ;       //每份的角度
        canvas.drawLine(mCenter, mCenter, mCenter, mCenter - mRadius, limep);

        float strWidth = textpant.measureText("文字");//文字宽度
        drawText(canvas, text[0], (float) mCenter - strWidth / 2, (float) (mCenter - mRadius * textpanding * 0.9));
        for (int i=1;i<7;i++){
            //左边1
            double xz1 = mRadius * Math.sin(r*i);
            double yz1 = mRadius * Math.cos(r*i);

            double x = mCenter + xz1;
            double y = mCenter - yz1;
            canvas.drawLine(mCenter,mCenter,(int)x, (int) (y),limep);

            double x2 = mCenter +  mRadius * textpanding  * Math.sin(r*i);
            double y2 = mCenter - mRadius *textpanding   * Math.cos(r*i);

            drawText(canvas, text[i], (float) x2 - strWidth/2, (float) y2);
        }


    }

    /**
     * 绘制文字
     * @param canvas
     */
    private void drawText(Canvas canvas,String text,float x,float y){
        canvas.drawText(text, x, y, textpant);// 画文本
    }

    /**
     * 绘制属性值
     * @param canvas
     * @param arr
     */
    private void drawAttr(Canvas canvas,Double[] arr){

        double textpanding = 1.3;
        double r = Math.PI * 2 / 7 ;       //每份的角度
        //计算出初始点
        //坐标0
        double x0 = mCenter + num[0] * mRadius * Math.sin(0);
        double y0 = mCenter - num[0] * mRadius * Math.cos(0);

        double x = x0;
        double y = y0;

       // canvas.drawLine(mCenter,mCenter,(float)x0,(float)y0,attrPaint);
        for (int i=1;i<7;i++){
            //坐标，并连接点
            double x1 = mCenter + num[i] * mRadius * Math.sin(r * i);
            double y1 = mCenter - num[i] * mRadius * Math.cos(r * i);
            canvas.drawLine((float)x0,(float)y0,(float)x1, (float) (y1),attrPaint);
            x0 = x1;
            y0 = y1;
        }
        //闭环
        canvas.drawLine((float)x0,(float)y0,(float)x, (float) (y),attrPaint);
    }


    public void setNum(Double[] newnum){
        if (newnum==num||newnum.length!=7){
            return;
        }
        this.num = newnum;

        //invalidate();
    }

}

    <test.interest.com.listviewedittest.MyView
        android:id="@+id/attrview"
        android:background="#eeeeee"
        android:layout_width="400dp"
        android:layout_height="400dp" />

效果图如下: