Android利用Canvas绘图功能来绘制五角星（升级版） 4年前

文章目录

• 上一篇问题解决

• 利用Canvas绘图功能来绘制五角星（升级版）

• 过程

• 结果

在上一篇文章中，我们利用直线的旋转绘制了五角星。出现了五角星会跑出界面 的情况。

我们就在这儿解决一下这个问题，并呈现另一种实现方式——函数画五角星。

上一篇问题解决

利用Canvas实现绘图功能（绘制五角星）

由于，随机画五角星，使得起始点是随机的，导致可以在移动的画布上随机画，因此会跑出界外。在这儿，我们加入代码，使其记住位置。改进代码如下：

copy
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import java.util.Random;

public class CanvasView extends View {
    public CanvasView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint1 = new Paint();

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

            Paint paint = paint1;
            paint.setAntiAlias(true);
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeWidth(5);
            paint.setColor(Color.GREEN);
            paint.setTextSize(24);
            int x = (int) (Math.random() * 600 + 200);
            int y = (int) (Math.random() * 1000 + 100);
            int r = (int) (Math.random() * 250 + 20);
            canvas.save();
            canvas.translate(x, y);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.translate(r, 0);
            canvas.rotate(144);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.translate(r, 0);
            canvas.rotate(144);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.translate(r, 0);
            canvas.rotate(144);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.translate(r, 0);
            canvas.rotate(144);
            canvas.drawLine(0, 0, r, 0, paint);
            canvas.restore();
        }
    }
}

这样，运行出来结果如下图：

有时候可能会出现五角星的角出界面，这只是五角星边的问题。是符合实验要求的。

利用Canvas绘图功能来绘制五角星（升级版）

过程

思路和上一篇文章中的思路大体一样，上篇文章网址：https://blog.csdn.net/qq_44164791/article/details/106147674
不同的只有绘制五角星的思路及代码

先找出各个点，计算出五角星各条线之间的夹角，然后利用path.moveTo();将各个点用线段连接起来，就可以绘制成五角星。具体代码如下：

copy
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.View;

import java.util.Random;


public class CanvasView extends View {

    private float xA,yA,xB,yB,xC,yC,xD,yD,xE,yE,xF,yF,xG,yG,xH,yH,xI,yI,xJ,yJ,x,y;//各个点的定义
    private int r;

    public CanvasView(Context context, AttributeSet attrs){
        super(context,attrs);
    }
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint=new Paint();//定义一个画笔
        paint.setColor(Color.RED);//画笔颜色
        canvas.drawRect(0,0,2000,2000,paint);//背景颜色所设计范围
        //canvas.drawRect(700,1000,700,1000,paint);
        //paint.setStyle(Paint.Style.STROKE);//画笔风格1（空心）
        paint.setStyle(Paint.Style.STROKE);//画笔风格2（实心）
        paint.setAntiAlias(true);//设置抗锯齿
        paint.setStrokeWidth(5);//画笔宽度

        //循环
        for (int i=0;i<10;i++){
            //五角星颜色
            paint.setColor(Color.YELLOW);
            //随机生成A点坐标和五角星边长
            Random random=new Random();
            int min=50;
            int max=100;
            r=random.nextInt(max)%(max-min+1)-min;
            x=(float) Math.random()*700;
            y=(float) Math.random()*1000;

            //标出五角星各个点的坐标
            xA=x;
            yA=y;
            xB=x+r;
            yB=y;
            xC=(float)(x+r+r*Math.sin(Math.toRadians(18)));
            yC=(float)(y+r*Math.cos(Math.toRadians(18)));
            xD=(float) (x+r+2*r*Math.sin(Math.toRadians(18)));
            yD=y;
            xE=(float) (x+2*r+2*r*Math.sin(Math.toRadians(18)));
            yE=y;
            xF=(float) (x+2*r+2*r*Math.sin(Math.toRadians(18))-r*Math.cos(Math.toRadians(36)));
            yF=(float)(y-r*Math.sin(Math.toRadians(36)));
            xG=(float) (x+2*r+2*r*Math.sin(Math.toRadians(18))-r*Math.cos(Math.toRadians(36))+r*Math.sin(Math.toRadians(27)));
            yG=(float)(y-r*Math.sin(Math.toRadians(36))-r*Math.cos(Math.toRadians(27)));
            xH=(float)(x+r*Math.cos(Math.toRadians(36))-r*Math.sin(Math.toRadians(27))+r*Math.cos(Math.toRadians(27)));
            yH=(float)(y-r*Math.sin(Math.toRadians(36))-r*Math.cos(Math.toRadians(27))+r*Math.sin(Math.toRadians(27)));
            xI=(float)(x+r*Math.cos(Math.toRadians(36))-r*Math.sin(Math.toRadians(27)));
            yI=(float)(y-r*Math.sin(Math.toRadians(36))-r*Math.cos(Math.toRadians(27)));
            xJ=(float)(x+r*Math.cos(Math.toRadians(36)));
            yJ=(float)(y-r*Math.sin(Math.toRadians(36)));
            Path path=new Path();//定义一个绘制多边形的类
            //开始绘制五角星
            path.moveTo(xA,yA);//起始点
            path.lineTo(xB,yB);
            path.lineTo(xC,yC);
            path.lineTo(xD,yD);
            path.lineTo(xE,yE);
            path.lineTo(xF,yF);
            path.lineTo(xG,yG);
            path.lineTo(xH,yH);
            path.lineTo(xI,yI);
            path.lineTo(xJ,yJ);
            path.close();//闭合
            canvas.drawPath(path,paint);
        }
    }
}

结果

在代码中加入了背景颜色，使得看起来更光鲜艳丽