Android自定义View——多边形网格属性图

1、Android自定义View多边形网格属性图多边形网格属性图效果图： 步骤一：分析变量信息java view plain copy/-我们必须给的模拟数据- /n边形 private int n = 5; /文字 private String text = new String"物理攻击", "魔法攻击", "防御能力", "上手度", "射程" /区域等级，值不能超过n边形的个数 private int area = new int4, 1, 3, 2, 1; /-View相关- /View自

2、身的宽和高 private int mHeight; private int mWidth; /-画笔相关- /边框的画笔 private Paint borderPaint; /文字的画笔 private Paint textPaint; /区域的画笔 private Paint areaPaint; /-多边形相关- /n边形个数 private int num = 5; /两个多边形之间的半径 private int r = 50; /n边形顶点坐标 private float x, y; /n边形角度 private float angle = (float) (2 * Math.PI

3、) / n); /文字与边框的边距等级，值越大边距越小 private int textAlign = 5; /-颜色相关- /边框颜色 private int mColor = 0xFF000000; /文字颜色 private int textColor = 0xFFFF0000; /区域颜色 private int areaColor = 0x800000ff; 晒上我的画的美图帮助理解：如果想切换到5、6、7边形等等，则必须修改其中这几条数据：java view plain copy/-我们必须给的模拟数据- /n边形 private int n = 5; /文字 private St

4、ring text = new String"物理攻击", "魔法攻击", "防御能力", "上手度", "射程" /区域等级，值不能超过n边形的个数 private int area = new int4, 1, 3, 2, 1; 步骤二：获取View的宽和高java view plain copy public MyPolygonView(Context context) super(context); public MyPolygonView(Context context, Attrib

5、uteSet attrs) super(context, attrs); public MyPolygonView(Context context, AttributeSet attrs, int defStyleAttr) super(context, attrs, defStyleAttr); Override protected void onSizeChanged(int w, int h, int oldw, int oldh) super.onSizeChanged(w, h, oldw, oldh); mWidth = w; mHeight = h; 步骤三：实现onDraw方法

6、，进行我们的绘制java view plain copy Override protected void onDraw(Canvas canvas) super.onDraw(canvas); /初始化画笔 initPaint(); /画布移到中心点 canvas.translate(mWidth / 2, mHeight / 2); /画n边形 drawPolygon(canvas); /画n边形的中点到顶点的线 drawLine(canvas); /画文字 drawText(canvas); /画蓝色区域 drawArea(canvas); java view plain copy /*

7、* 初始化画笔 */ private void initPaint() /边框画笔 borderPaint = new Paint(); borderPaint.setAntiAlias(true); borderPaint.setStyle(Paint.Style.STROKE); borderPaint.setColor(mColor); borderPaint.setStrokeWidth(3); /文字画笔 textPaint = new Paint(); textPaint.setTextSize(30); textPaint.setColor(textColor); textPai

8、nt.setAntiAlias(true); /区域画笔 areaPaint = new Paint(); areaPaint.setColor(areaColor); areaPaint.setAntiAlias(true); areaPaint.setStyle(Paint.Style.FILL_AND_STROKE); /* * 绘制多边形 * * param canvas */ private void drawPolygon(Canvas canvas) Path path = new Path(); /n边形数目 for (int j = 1; j <= num; j+) f

9、loat r = j * this.r; path.reset(); /画n边形 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); /关闭当前轮廓。如果当前点不等于第一个点的轮廓,一条线段是自动添加的 path.close(); canvas.drawPath(path, borderPaint); /* * 画多边形线段

10、 * * param canvas */ private void drawLine(Canvas canvas) Path path = new 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); /* * 画文字 * * par

11、am canvas */ private void drawText(Canvas canvas) float r = num * this.r; for (int i = 1; i <= n; i+) /测量文字的宽高 Rect rect = new Rect(); textPaint.getTextBounds(texti - 1, 0, texti - 1.length(), rect); float textWidth = rect.width(); float textHeight = rect.height(); x = (float) (Math.cos(i * angle

12、) * r); y = (float) (Math.sin(i * angle) * r); /位置微调 if (x < 0) x = x - textWidth; if (y > 25) y = y + textHeight; /调文字与边框的边距 float LastX = x + x / num / textAlign; float LastY = y + y / num / textAlign; canvas.drawText(texti - 1, LastX, LastY, textPaint); /* * 画区域 * * param canvas */ private

13、void drawArea(Canvas canvas) Path path = new Path(); for (int i= 1; i<= n; i+) float r = areai - 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); /关闭当前轮廓。如果当前点不等于第一个点的轮廓,一条线段是自动添加的 path.close(); canvas.

14、drawPath(path, areaPaint); 步骤四：分析上面代码的绘制过程思路分析：1、开始画画前：我们要把画笔准备好，这里看代码就能明白意思了，接着把整个View的图纸的重心点定位到我们整个View宽高的中点，这样开始画画的（0，0）点就在这个View的中点了。2、画n边形：第一层循环是画出n边形的数目，第二层循环才是画n边形的步骤，我们讲解第二层循环。首先通过角度（angle）可以找出我们n边形的顶点，用到了高中知识。接着让Path移到（path.moveTo）某一顶点开始，然后连接下一个顶点（path.lineTo）作为直线，最后用（path.close）会自动把最后一条边自动

15、合上。记住，画完一个n边形后记得（path.reset），让path的起点回到（0，0）。3、画n边形到顶点之间的直线：这个不难理解，这里就不多讲了。4、画红色文字：这里的实现方法大家都可以自己实现，放在哪里看你个人的爱好，如果有更好的方法请留言，谢谢。这里我用的方法就是先测量出每个字符串的宽高，只要想办法将字符串的某个顶点移到n边形的顶点重合，并不占用网格位置，接着全部向外扩散就行了。晒上我美美的图解：5、画区域：根据绘制了多边形可以理解这个绘制区域，只是将其r改为区域所需要的值即可，这里不过多介绍。最后献上这个类的源码：源码下载java view plain copy public cla

16、ss MyPolygonView extends View /-我们必须给的模拟数据- /n边形 private int n = 5; /文字 private String text = new String"物理攻击", "魔法攻击", "防御能力", "上手度", "射程" /区域等级，值不能超过n边形的个数 private int area = new int4, 1, 3, 2, 1; /-View相关- /View自身的宽和高 private int mHeight; private

17、int mWidth; /-画笔相关- /边框的画笔 private Paint borderPaint; /文字的画笔 private Paint textPaint; /区域的画笔 private Paint areaPaint; /-多边形相关- /n边形个数 private int num = 5; /两个多边形之间的半径 private int r = 50; /n边形顶点坐标 private float x, y; /n边形角度 private float angle = (float) (2 * Math.PI) / n); /文字与边框的边距等级，值越大边距越小 private

18、 int textAlign = 5; /-颜色相关- /边框颜色 private int mColor = 0xFF000000; /文字颜色 private int textColor = 0xFFFF0000; /区域颜色 private int strengthColor = 0x800000ff; public MyPolygonView(Context context) super(context); public MyPolygonView(Context context, AttributeSet attrs) super(context, attrs); public MyP

19、olygonView(Context context, AttributeSet attrs, int defStyleAttr) super(context, attrs, defSyleAttr); 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(can

20、vas); /初始化画笔 initPaint(); /画布移到中心点 canvas.translate(mWidth / 2, mHeight / 2); /画n边形 drawPolygon(canvas); /画n边形的中点到顶点的线 drawLine(canvas); /画文字 drawText(canvas); /画蓝色区域 drawArea(canvas); /* * 初始化画笔 */ private void initPaint() /边框画笔 borderPaint = new Paint(); borderPaint.setAntiAlias(true); borderPaint

21、.setStyle(Paint.Style.STROKE); borderPaint.setColor(mColor); borderPaint.setStrokeWidth(3); /文字画笔 textPaint = new Paint(); textPaint.setTextSize(30); textPaint.setColor(textColor); textPaint.setAntiAlias(true); /区域画笔 areaPaint = new Paint(); areaPaint.setColor(strengthColor); areaPaint.setAntiAlias(

22、true); areaPaint.setStyle(Paint.Style.FILL_AND_STROKE); /* * 绘制多边形 * * param canvas */ private void drawPolygon(Canvas canvas) Path path = new Path(); /n边形数目 for (int j = 1; j <= num; j+) float r = j * this.r; path.reset(); /画n边形 for (int i = 1; i <= n; i+) x = (float) (Math.cos(i * angle) * r

23、); y = (float) (Math.sin(i * angle) * r); if (i = 1) path.moveTo(x, y); else path.lineTo(x, y); /关闭当前轮廓。如果当前点不等于第一个点的轮廓,一条线段是自动添加的 path.close(); canvas.drawPath(path, borderPaint); /* * 画多边形线段 * * param canvas */ private void drawLine(Canvas canvas) Path path = new Path(); float r = num * this.r; fo

24、r (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); /* * 画文字 * * param canvas */ private void drawText(Canvas canvas) float r = num * this.r; for (int i = 1; i <= n; i+) /测量文字的宽高 Rect rect =