Android画各种圆,饼图,环图,圆形图片

原创 2015年11月19日 20:20:30

最近在学习android的画图所以就学习了一下。看了很多资料。特别是爱哥的博客,学习了很多,我也要分享一下:
这里写图片描述
首先画个圆(简单的很):
自定义的View
设置好paint,canvas.drawCircle()就行,上代码

public Circle02(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        //抗锯齿
        paint.setAntiAlias(true);
        //Style.FILL就是实心的圆,Style.STROKE只画圆的边,Style.FILL_AND_STROKE有边有实心
        paint.setStyle(Style.FILL);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获得圆心
        center_x = getMeasuredWidth() / 2 ; 
        center_y = getMeasuredHeight() / 2 ;
        //取小的为半径
        r = Math.min(getMeasuredWidth() / 2, getMeasuredHeight() / 2);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        paint.setARGB(255, 255, 0, 255);
        canvas.drawCircle(center_x, center_y, r, paint);
getRight(), getBottom(), paint);
        super.onDraw(canvas);
    }

这里写图片描述
画饼图:再画一个扇形呗,改一下onDraw就行了

@Override
    protected void onDraw(Canvas canvas) {
        paint.setARGB(255, 255, 0, 255);
        canvas.drawCircle(center_x, center_y, r, paint);

        //onDraw尽量不要new,这样很耗内存,这里我偷懒了
        RectF oval = new RectF(center_x - r, center_y - r, center_x + r, center_y + r);
        paint.setColor(Color.parseColor("#FFFF00"));
        //第一个参数数为RectF,第二个参数是起始角度(-90到270),第三个参数扫过多少角度
        //第四个参数要不要过中心试一试就知道有什么不同,第五个就是画笔
        canvas.drawArc(oval,0,97,true,paint);
        super.onDraw(canvas);
    }

这里写图片描述
知道画圆,画环就差不多,很多记录步数,就可以用这样的图
代码中我会有注解,应该能明白

@Override
    protected void onDraw(Canvas canvas) {

        RectF oval = new RectF(center_x-r, center_y - r, center_x + r, center_y + r);
        //出现颜色渐变的过程,第一,二两个参数就是渐变开始的X,Y坐标
        //new int[]{0xFFE9E9E9,0xFFFFFFFF}渐变的颜色
        mShader = new SweepGradient( center_x , center_y - r ,new int[]{0xFFE9E9E9,0xFFFFFFFF},null );
        paint.setARGB(255, 255, 222, 226);
        paint.setStrokeCap(Cap.ROUND);
        paint.setStrokeWidth(10);
        paint.setShader(mShader);
        canvas.drawArc(oval,-70, 320, false, paint);        

        //第二个环,通过progress控制环扫过多少,是不是可以用来设置步数
        paint.reset();
        paint.setStrokeCap(Cap.ROUND);
        paint.setAntiAlias(true);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(circleWidth);
        paint.setARGB(255, 138, 43, 226);
        canvas.drawArc(oval, -90, progress, false, paint);

        //画中间的数字
        paint.setColor(Color.parseColor("#000000"));
        paint.setTextSize(30);
        paint.setStrokeWidth(1);
        //水平居中
        paint.setTextAlign(Align.CENTER);
        FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
        canvas.drawText(String.valueOf(progress), center_x, center_y - fontMetricsInt.ascent / 2, paint);

        super.onDraw(canvas);
    }

这里写图片描述
这样的圆用来计步的会更加多一点,是如何做到的呢?其实就多了一个PathEffect,看代码吧

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        center_x = getWidth() / 2 ; 
        center_y = getHeight() / 2 ;

        oval.left = center_x - r;
        oval.right = center_x + r;
        oval.top = center_y - r;
        oval.bottom = center_y + r;
        //出现断断续续的效果,2表示画实的距离,3表示空的距离
        effect = new DashPathEffect(new float[]{2,3},0);
        paint.setPathEffect(effect);
        /* 
         * 设置描边的粗细,单位:像素px 
         * 注意:当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素 
         */  
        paint.setStrokeWidth(width);
        paint.setColor(Color.RED);      
        canvas.drawArc(oval, -90, 360, false, paint);

    }

这里写图片描述

    @Override
    protected void onDraw(Canvas canvas) {

        BitmapDrawable drawable = (BitmapDrawable) getDrawable();
        if (null != drawable) {
            Bitmap b = drawable.getBitmap();
            b = getCircleBitmap(b);
            rectSrc.left = 0;
            rectSrc.top = 0;
            rectSrc.right = b.getWidth();
            rectSrc.bottom = b.getHeight();

            rectDest.left = 0;
            rectDest.top = 0;
            rectDest.right = getWidth();
            rectDest.bottom = getHeight();
            paint.reset();
            canvas.drawBitmap(b, rectSrc, rectDest, paint);

        } else {
            super.onDraw(canvas);
        }
    }

    Canvas mCanvas;

    /**
     * 通过设置paint的setXfermode,两张图片叠加的不同模式。来达到圆形图片的效果 1.画DST 2.setXfermode 3.画SRC
     * 
     * @param bitmap
     *            圆形图片
     * @return
     */
    private Bitmap getCircleBitmap(Bitmap bitmap) {

        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Config.ARGB_8888);
        mCanvas = new Canvas(output);
        int color = 0xff424242;
        Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        paint.setAntiAlias(true);
        paint.setColor(color);

        // 准备一张src图,(中间一个圆,四周透明)
        Bitmap srcBitmap = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Config.ARGB_8888);
        Canvas mCanvas2 = new Canvas(srcBitmap);
        // 透明度为0很关键
        mCanvas2.drawARGB(0, 0, 0, 0);
        int x = bitmap.getWidth();
        int y = bitmap.getHeight();
        paint.setStyle(Style.FILL);
        paint.setColor(Color.RED);
        mCanvas2.drawCircle(x / 2, y / 2, Math.min(x / 2, y / 2), paint);

        // 1.画DST 2.setXfermode 3.画SRC
        mCanvas.drawBitmap(bitmap, rect, rect, null);
        paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
        mCanvas.drawBitmap(srcBitmap, rect, rect, paint);

        return output;

    }

跟据PorterDuffXfermode.Mode可以画出很多图像,也可以用其他模式化圆形图片
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android中实现环状图的两种方式

简单介绍两种环状图的实现方式
  • yyly2s6x3x3
  • yyly2s6x3x3
  • 2015年07月14日 15:20
  • 1943

android hellocharts 环形图

首先下载相关的jar包 这里用的是hellocharts_library-1.5.8.jar 然后就是在布局里写相关组件了,这里用的是 饼图 ...
  • xq43701200
  • xq43701200
  • 2016年05月29日 23:33
  • 1000

Android自定义view——动态画圆形

最近经常会被问到自定义控件方向的问题,今天抽空做了一个简单的demo。简单仿照火箭闹钟首页的动画。就是动态的画一个圆形,这个和当前时间的秒值绑定。下面直接看代码...
  • qq_33234564
  • qq_33234564
  • 2016年09月12日 18:05
  • 1059

【Android UI】自定义圆形Loading动画

1、创建环形loading图片
  • u011634062
  • u011634062
  • 2015年07月30日 15:38
  • 1845

android自定义环形对比图(外环有类似进度条的旋转动画)

实现了类似原型进度条的圆环对比图。第一次写博客,忘大家多多捧场
  • u012483116
  • u012483116
  • 2016年02月04日 15:44
  • 2004

【Android自定义View实战】之自定义圆形头像CircleImageView支持加载网络图片

在Android开发中我们常常用到圆形的头像,如果每次加载之后再进行圆形裁剪特别麻烦。所以在这里写一个自定义圆形ImageView,直接去加载网络图片,这样的话就特别的方便。 先上效果图 ...
  • u010785585
  • u010785585
  • 2016年10月27日 09:03
  • 3398

Android 笔记:自定义View 环形Progress

Android 自定义View 环形Progress
  • xiaoyu940601
  • xiaoyu940601
  • 2017年02月07日 17:31
  • 261

圆角和圆形ImageView

※效果 ※代码 /** * 转换图片成圆形 * * @param bitmap * 传入Bitmap对象 * @re...
  • u010785585
  • u010785585
  • 2014年07月29日 11:17
  • 1047

【Android自定义View实战】之仿QQ运动步数圆弧及动画,Dylan计步中的控件StepArcView

在之前的Android超精准计步器开发-Dylan计步中的首页用到了一个自定义控件,和QQ运动的界面有点类似,还有动画效果,下面就来讲一下这个View是如何绘制的。 1.先看效果图2.效果图分析 功能...
  • u010785585
  • u010785585
  • 2016年10月28日 08:41
  • 4599

Android自定义View和属性动画完美结合,创造出酷炫圆环动画,带标尺和进度

Android自定义View和属性动画完美结合,创造出酷炫圆环动画,带标尺和进度 无意中,在看了[【Android自定义View实战】之仿QQ运动步数圆弧及动画,Dylan计步中的控件StepAr...
  • u010785585
  • u010785585
  • 2016年11月15日 16:57
  • 3297
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android画各种圆,饼图,环图,圆形图片
举报原因:
原因补充:

(最多只允许输入30个字)