先看看效果
分析
所谓五角星,其实就是均分圆上的5个点,相互连线而成的。
那么就只要知道这5个点的坐标就可以了。
那怎么求圆上点的坐标呢?
圆心坐标:(x0,y0) 半径:r 角度:a 求:x1 = ? y1 = ?
答案就是三角函数
sin α=∠α的对边 / 斜边
cos α=∠α的邻边 / 斜边
tan α=∠α的对边 / ∠α的邻边
也就是说,只要是个直角三角形(三角函数只在直角三角形中有效)
,知道斜边c的长度,∠A的度数,就可以知道直角边a、b的长度。
边a = sin a * 斜边
边b = cos a * 斜边
以点(x0,y0)、(x1,y1)、(x2,y2)组成的直角三角形,因为斜边就是半径,所以x1 和 y1的坐标就很好求了,就是两条直角边的长度。
也就是说:
x1 = x0 + r * cos∠A
y1 = y0 + r * sin∠A
在android中需要用到Math函数
public final class Math {
public static final double PI = 3.14159265358979323846;
/**
* Returns the trigonometric sine of an angle. Special cases:
* <ul><li>If the argument is NaN or an infinity, then the
* result is NaN.
* <li>If the argument is zero, then the result is a zero with the
* same sign as the argument.</ul>
*
* <p>The computed result must be within 1 ulp of the exact result.
* Results must be semi-monotonic.
*
* @param a an angle, in radians.
* @return the sine of the argument.
*/
@CriticalNative
public static native double sin(double a);
/**
* Returns the trigonometric cosine of an angle. Special cases:
* <ul><li>If the argument is NaN or an infinity, then the
* result is NaN.</ul>
*
* <p>The computed result must be within 1 ulp of the exact result.
* Results must be semi-monotonic.
*
* @param a an angle, in radians.
* @return the cosine of the argument.
*/
@CriticalNative
public static native double cos(double a);
}
需要注意的是:在android中Math.sin(double a)
、Math.cos(double a)
参数一个弧度,而不是角度,需要用Math.toRadians(double angdeg)
转化为角度。
x1 = x0 + r * Math.sin( Math.toRadians(270) )
y1 = y0 + r * Math.cos( Math.toRadians(270) )
编写代码
package com.noahedu.my;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import com.noahedu.my.bean.PointBean;
import java.util.ArrayList;
import java.util.List;
public class PentacleView extends View {
private Context context;
private Paint mPaint;
private Paint mBgPaint;
private Rect mRect;
public PentacleView(Context context) {
this(context, null);
}
public PentacleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, -1);
}
public PentacleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
this.context = context;
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.STROKE);
mBgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mBgPaint.setColor(Color.WHITE);
mPaint.setColor(Color.RED);
mRect = new Rect();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = canvas.getWidth();
int height = canvas.getHeight();
canvas.drawRect(0, 0, width, height, mBgPaint);
int zhijing = width > height ? height : width;
int radius = zhijing >> 1;
float circleX = width >> 1;
float circleY = height >> 1;
drawPentacleView(canvas, mPaint, circleX, circleY, radius);
}
private List<PointBean> mPointBeanList;
/**
* 根据圆心和半径求出五角星5个点
*/
private void drawPentacleView(Canvas canvas, Paint paint, float circleX, float circleY, float radius) {
mPointBeanList = new ArrayList<>();
for (int i = 270; i >= -22; i -= 72) {
float x = (float) (circleX + radius * Math.cos(Math.toRadians(i)));
float y = (float) (circleY + radius * Math.sin(Math.toRadians(i)));
PointBean pointBean = new PointBean(x, y);
mPointBeanList.add(pointBean);
}
drawPentacleView(canvas, paint, mPointBeanList);
}
/**
* 画出五角星的5条线
*/
private void drawPentacleView(Canvas canvas, Paint paint, List<PointBean> pointBeanList) {
drawPentacleLine(canvas, paint, pointBeanList, 1, 4);
drawPentacleLine(canvas, paint, pointBeanList, 4, 2);
drawPentacleLine(canvas, paint, pointBeanList, 2, 0);
drawPentacleLine(canvas, paint, pointBeanList, 0, 3);
drawPentacleLine(canvas, paint, pointBeanList, 3, 1);
}
private void drawPentacleLine(Canvas canvas, Paint paint, List<PointBean> pointBeanList, int startIndex, int endIndex) {
float startX = pointBeanList.get(startIndex).getPointX();
float startY = pointBeanList.get(startIndex).getPointY();
float endX = pointBeanList.get(endIndex).getPointX();
float endY = pointBeanList.get(endIndex).getPointY();
canvas.drawLine(startX, startY, endX, endY, paint);
}
}
网友评论