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

来源:互联网 发布:windows10优化技巧 编辑:程序博客网 时间:2024/05/07 17:05

最近在学习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可以画出很多图像,也可以用其他模式化圆形图片
这里写图片描述

1 0
原创粉丝点击