android 正五边形图表,Android 自定义View 仿蚂蚁信用分析----正多边形绘制

支付宝芝麻信用分-分析中，有个正五边形，试着做了下

效果图：

 

分析图：

已知半径为R，圆心点O(a,b)，点A(a, c=b-R)， OA=OB=R，圆心角O的度数

> 求出弦AB的长度

> 利用两点间距离公式，得到两个方程AB、OB相关的，解出y的值

> 将y代入其中一个方程，解出x的值 (我这里代入的是AB的方程)

> 利用canvas旋转，循环绘制OA、AB

package com.stone.canvaspath.zhima;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.view.View;

/**

* 正N边形

* author : stone

* email : aa86799@163.com

* time : 2016/11/17 14 12

*/

public class ZhimaView extends View {

private Paint mPaint;

private float mR, mCx, mCy;

private static final int mN = 9;

private static final float DEGREES_UNIT = 360 / mN; //正N边形每个角 360/mN能整除

public ZhimaView(Context context) {

this(context, null);

}

public ZhimaView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public ZhimaView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

mPaint = new Paint();

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

float mW = getMeasuredWidth();

float mH = getMeasuredHeight();

mCx = mW / 2;

mCy = mH / 2;

mR = Math.min(mCx, mCy) / 4 * 3;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

mPaint.setColor(Color.BLUE);

mPaint.setStyle(Paint.Style.STROKE);

float d = (float) (2 * mR * Math.sin(Math.toRadians(DEGREES_UNIT / 2)));

float c = mCy - mR;

float y = (d * d + mCy * mCy - c * c - mR * mR) / (2 * (mCy - c));

float x = (float) (mCx + Math.sqrt(-1 * c * c + 2 * c * y + d * d - y * y));

for (int i = 0; i < mN; i++) {

canvas.save();

canvas.rotate(DEGREES_UNIT * i, mCx, mCy);

canvas.drawLine(mCx, mCy, mCx, c, mPaint);

canvas.drawLine(mCx, c, x, y, mPaint);

canvas.restore();

}

}

}

简单的绘制正多边形，发现如上就可以了，但是想在各顶点外绘制文字、图片就还是要取到

具体的坐标值才行。所以用三角函数算出圆弧上的各顶点；在圆之外的就以增大半径值来计算

效果图：

最后还有个问题，就是这里默认是0度线起始绘制，如果想以任意度数起始绘制，

可以加个简单的旋转在最开始时，如：

canvas.rotate(30, mCx, mCy);

这时效果图：

现在多边形和文本一起旋转了，这就有了新的问题：如果只旋转多边形，而不旋转对应文本呢？

可以根据公式解出旋转后的点坐标

最终效果图：