掌上英雄联盟app,有玩lol游戏的人应该都用过它,app里面查看能力的图形,用到了一个挺不错的属性图形,一个自定义控件,今天项目完成差不多,有空来模仿一下这个控件。
先看一下效果图,这个图,分析一下,
先绘制4个背景(4个7变形)
绘制线条
绘制文字
绘制属性
有7种属性,是一个正七边行,我的思路是,可以拆分为4个不同半径的7边行,其中圆形是一样的,然后7边行的几个顶点坐标,可以理由圆形,边长,角度来,理由sin和cos,把顶点坐标算出来,用path绘制一个7边行
源码如下:大致思路都写了注释
package test.interest.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.listviewedittest.MyView
android:id="@+id/attrview"
android:background="#eeeeee"
android:layout_width="400dp"
android:layout_height="400dp" />
效果图如下:
更多推荐
蜘蛛网属性图形控件
发布评论