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

最近在学习android的画图所以就学习了一下。看了很多资料。特别是爱哥的博客，学习了很多，我也要分享一下：
Android画各种圆，饼图，环图，圆形图片_第1张图片
首先画个圆（简单的很）：
自定义的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);    }

Android画各种圆，饼图，环图，圆形图片_第2张图片
画饼图：再画一个扇形呗，改一下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);    }

Android画各种圆，饼图，环图，圆形图片_第3张图片
知道画圆，画环就差不多，很多记录步数，就可以用这样的图
代码中我会有注解，应该能明白

@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);    }

Android画各种圆，饼图，环图，圆形图片_第4张图片
这样的圆用来计步的会更加多一点，是如何做到的呢？其实就多了一个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);    }

Android画各种圆，饼图，环图，圆形图片_第5张图片

    @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画各种圆，饼图，环图，圆形图片_第6张图片

更多相关文章

随机推荐