美文网首页新收藏
用Android画个五角星

用Android画个五角星

作者: duoduo7628 | 来源:发表于2021-03-23 16:43 被阅读0次

    先看看效果


    分析
    所谓五角星,其实就是均分圆上的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);
        }
    }
    
    

    参考:
    已知圆心,半径,角度,求圆上的点坐标

    相关文章

      网友评论

        本文标题:用Android画个五角星

        本文链接:https://www.haomeiwen.com/subject/wfufhltx.html