Android利用Canvas绘图功能来绘制五角星(升级版)

   日期:2020-05-20     浏览:89    评论:0    
核心提示:这里写目录标题上一篇问题解决利用Canvas绘图功能来绘制五角星(升级版)过程结果在上一篇文章中,我们利用直线的旋转绘制了五角星。出现了五角星会跑出界面 的情况。我们就在这儿解决一下这个问题,并呈现另一种实现方式——函数画三角行。上一篇问题解决利用Canvas实现绘图功能(绘制五角星)由于,随机画五角星,使得起始点是随机的,导致可以在移动的画布上随机画,因此会跑出界外。在这儿,我们加入代码,使其记住位置。改进代码如下:package com.example.myexperiment5515;移动开发

文章目录

    • 上一篇问题解决
    • 利用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);
        }
    }
}

结果

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

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
更多>相关资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服