文章目录
- 上一篇问题解决
- 利用Canvas绘图功能来绘制五角星(升级版)
- 过程
- 结果
在上一篇文章中,我们利用直线的旋转绘制了五角星。出现了五角星会跑出界面 的情况。
我们就在这儿解决一下这个问题,并呈现另一种实现方式——函数画五角星。
上一篇问题解决
利用Canvas实现绘图功能(绘制五角星)
由于,随机画五角星,使得起始点是随机的,导致可以在移动的画布上随机画,因此会跑出界外。在这儿,我们加入代码,使其记住位置。改进代码如下:
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();将各个点用线段连接起来,就可以绘制成五角星。具体代码如下:
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);
}
}
}
结果
在代码中加入了背景颜色,使得看起来更光鲜艳丽