Android中自定义View中的Paint,Canvas,RectF,Path

最新推荐文章于 2022-11-12 22:22:23 发布
最新推荐文章于 2022-11-12 22:22:23 发布
阅读量2.4k 收藏
点赞数
分类专栏： android应用层
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/dodan/article/details/51835285
版权

每一个View的绘制过程都必须经历三个最主要的过程，也就是onMeasure()、onLayout() 和 onDraw()

一般在构造方法中做这样的事情：


	public RoundView(Context context) {
		this(context, null);
	}

	public RoundView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public RoundView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		// 获取我们自定义的样式属性
		TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.RoundView, defStyleAttr, 0);
		int n = array.getIndexCount();
		for (int i = 0; i < n; i++) {
			int attr = array.getIndex(i);
			switch (attr) {
			case R.styleable.RoundView_titleColor:
				// 默认颜色设置为黑色
				textColor = array.getColor(attr, Color.BLUE);
				break;
			case R.styleable.RoundView_lineColor:
				lineColor = array.getColor(attr, Color.BLUE);
				break;
			}
		}
		array.recycle();
		init();//在此方法内初始化自定义View中的各个成员变量;  
	}



接下来   onMeasure()、中做这样的事情： 

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);
		int widthSize = MeasureSpec.getSize(widthMeasureSpec);
		int heightMode = MeasureSpec.getMode(heightMeasureSpec);
		int heightSize = MeasureSpec.getSize(heightMeasureSpec);
		int width;
		int height;
		// 如果布局里面设置的是固定值,这里取布局里面的固定值;如果设置的是match_parent,则取父布局的大小
		if (widthMode == MeasureSpec.EXACTLY) {
			width = widthSize;
		} else {
		<span style="white-space:pre">	</span>// 如果布局里面没有设置固定值,这里取布局的宽度的1/2
			width = widthSize * 1 / 2;
		}
		if (heightMode == MeasureSpec.EXACTLY) {
			height = heightSize;
		} else {
			// 如果布局里面没有设置固定值,这里取布局的高度的3/4
			height = heightSize * 3 / 4;
		}
		widthBg = width;
		heightBg = height;
		setMeasuredDimension(width, height);   //设置该自定义View的宽高
		startAnim();  //启动动画...
	}



onLayout() 方法是ViewGroup中子View的布局方法，用于放置子View的位置。放置子View很简单，只需在重写onLayout方法，然后获取子View的实例，调用子View的layout方法实现布局。 在这里没写。


接下来是onDraw()方法 用来绘制图形;

	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		// 绘制最底层的背景
		radiusBg = widthBg / 20;  // 背景的坐标
		pathBg.moveTo(0, heightBg);  设置绘制的开始点(x,y)。
		pathBg.lineTo(0, radiusBg);  //添加一条从一点到指定点(x,y)的线，如果没有移至，则自动设置为(0,0)。
		pathBg.quadTo(0, 0, radiusBg, 0);// 用于绘制圆滑曲线 mPath.quadTo(x1, y1, x2, y2) (x1,y1) 为控制点，(x2,y2)为结束点
		pathBg.lineTo(widthBg - radiusBg, 0);
		pathBg.quadTo(widthBg, 0, widthBg, radiusBg);
		pathBg.lineTo(widthBg, heightBg);
		pathBg.lineTo(0, heightBg);
		backgroundPaint.setColor(Color.WHITE);
		canvas.drawPath(pathBg, backgroundPaint);
	}



cubicTo 同样是用来实现贝塞尔曲线的。

mPath.cubicTo(x1, y1, x2, y2, x3, y3) (x1,y1) 为控制点，(x2,y2)为控制点，(x3,y3) 为结束点。




arcTo 用于绘制弧线（实际是截取圆或椭圆的一部分）。

mPath.arcTo(ovalRectF, startAngle, sweepAngle) , ovalRectF为椭圆的矩形，startAngle 为开始角度，sweepAngle 为结束角度。

mRectF = new RectF(10, 10, 600, 600);
mPath.arcTo(mRectF, 0, 90);
canvas.drawPath(mPath, mPaint);

由于new RectF(10, 10, 600, 600)为正方形，又截取 0 ~ 90 度 ，则所得曲线为四分之一圆的弧线。

效果如如下




另外贴上RoundView的效果图，以及完整代码：


package com.panda.app.customer;
import android.animation.AnimatorSet;
import android.animation.ValueAnimator;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathEffect;
import android.graphics.RectF;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import android.view.View.MeasureSpec;

import com.example.mylibary.R;

@SuppressLint("NewApi")
public class RoundView extends View {

    private int mySize, rank, averageSize;
    private String myaverageTxt;


    //字体颜色,大小,竖线的颜色
    private int textColor, lineColor;
    //背景的画笔
    private Paint backgroundPaint;
    //背景的坐标
    private int radiusBg, widthBg, heightBg;
    private Path pathBg, linePath;
    //圆弧的画笔
    private Paint arcPaint;
    private RectF arcRect;
    //数字的画笔
    private Paint textPaint;
    private PathEffect effects;

    //虚线的画笔
    private Paint linePaint;


    //圆角竖条的距离,高度,平均高度
    private float rectSize, rectAgHeight;
    //圆角竖条的画笔
    private Paint rectPaint;
    private Path rectPath;

    //底部波纹
    private Paint weavPaint;
    private Path weavPath;

    //动画实现
    //动画效果的添加
    private AnimatorSet animSet;
    private int walkNum, rankNum;
    private float arcNum;


    public void setMySize(int mySize) {
        this.mySize = mySize;
    }

    public void setRank(int rank) {
        this.rank = rank;
    }

    public void setAverageSize(int averageSize) {
        this.averageSize = averageSize;
    }

    public RoundView(Context context) {
        this(context, null);
    }

    public RoundView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        //获取我们自定义的样式属性
        TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.RoundView, defStyleAttr, 0);
        int n = array.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.RoundView_titleColor:
                    // 默认颜色设置为黑色
                    textColor = array.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.RoundView_lineColor:
                    lineColor = array.getColor(attr, Color.BLACK);
                    break;
            }

        }
        array.recycle();
        init();
    }

    //初始化操作
    private void init() {
        pathBg = new Path();
        backgroundPaint = new Paint();
        backgroundPaint.setAntiAlias(true);
        arcPaint = new Paint();
        arcPaint.setAntiAlias(true);
        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        linePaint = new Paint();
        linePaint.setAntiAlias(true);
        linePath = new Path();
        effects = new DashPathEffect(new float[]{5,5}, 1);
        rectPaint = new Paint();
        rectPaint.setAntiAlias(true);
        rectPath = new Path();
        weavPaint = new Paint();
        weavPaint.setAntiAlias(true);
        weavPath = new Path();
        animSet = new AnimatorSet();
    }


    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
	@SuppressLint("NewApi")
	@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制最底层的背景
        radiusBg = widthBg / 20;
        pathBg.moveTo(0, heightBg);
        pathBg.lineTo(0, radiusBg);
        pathBg.quadTo(0, 0, radiusBg, 0);
        pathBg.lineTo(widthBg - radiusBg, 0);
        pathBg.quadTo(widthBg, 0, widthBg, radiusBg);
        pathBg.lineTo(widthBg, heightBg);
        pathBg.lineTo(0, heightBg);
        backgroundPaint.setColor(Color.WHITE);
        canvas.drawPath(pathBg, backgroundPaint);

        //绘制圆弧
        arcPaint.setStrokeWidth(widthBg / 20);
        //设置空心
        arcPaint.setStyle(Paint.Style.STROKE);
        //防抖动
        arcPaint.setDither(true);
        //连接处为圆弧
        arcPaint.setStrokeJoin(Paint.Join.ROUND);
        //画笔的笔触为圆角
        arcPaint.setStrokeCap(Paint.Cap.ROUND);
        arcPaint.setColor(lineColor);
        //圆弧范围
        arcRect = new RectF(widthBg * 1 / 4, widthBg * 1 / 4, widthBg * 3 / 4, widthBg * 3 / 4);
        //绘制背景大圆弧
        canvas.drawArc(arcRect, 120, 300, false, arcPaint);
        arcPaint.setColor(textColor);
        //绘制分数小圆弧
        canvas.drawArc(arcRect, 120, arcNum, false, arcPaint);

        //绘制圆圈内的数字
        textPaint.setColor(textColor);
        textPaint.setTextSize(widthBg / 10);
        canvas.drawText(String.valueOf(walkNum), widthBg * 3 / 8, widthBg * 1 / 2 + 20, textPaint);
        //绘制名次
        textPaint.setTextSize(widthBg / 15);
        canvas.drawText(String.valueOf(rankNum), widthBg * 1 / 2 - 15, widthBg * 3 / 4 + 10, textPaint);

        //绘制其他文字
        textPaint.setColor(lineColor);
        textPaint.setTextSize(widthBg / 25);
        canvas.drawText("截止13:45已走", widthBg * 3 / 8 - 10, widthBg * 5 / 12 - 10, textPaint);
        canvas.drawText("好友平均2781步", widthBg * 3 / 8 - 10, widthBg * 2 / 3 - 20, textPaint);
        canvas.drawText("第", widthBg * 1 / 2 - 50, widthBg * 3 / 4 + 10, textPaint);
        canvas.drawText("名", widthBg * 1 / 2 + 30, widthBg * 3 / 4 + 10, textPaint);

        //绘制圆圈外的文字
        canvas.drawText("最近7天", widthBg * 1 / 15, widthBg, textPaint);
        myaverageTxt = String.valueOf(averageSize);
        canvas.drawText("平均", widthBg * 10 / 15 - 15, widthBg, textPaint);
        canvas.drawText(myaverageTxt, widthBg * 11 / 15, widthBg, textPaint);
        canvas.drawText("步/天", widthBg * 12 / 15 + 20, widthBg, textPaint);

        //绘制虚线
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setStrokeWidth(2);
        linePaint.setColor(lineColor);
        linePath.moveTo(widthBg * 1 / 15, widthBg + 80);
        linePath.lineTo(widthBg * 14 / 15, widthBg + 80);
        linePaint.setPathEffect(effects);
        canvas.drawPath(linePath, linePaint);

        rectSize = widthBg / 12;
        rectAgHeight = widthBg / 10;
        //绘制虚线上的圆角竖线
        for (int i = 0; i < 4; i++) {
            rectPaint.setStrokeWidth(widthBg / 25);
            rectPaint.setStyle(Paint.Style.STROKE);
            rectPaint.setStrokeJoin(Paint.Join.ROUND);
            rectPaint.setStrokeCap(Paint.Cap.ROUND);
            float startHeight = widthBg + 90 + rectAgHeight;
            rectPath.moveTo(rectSize, startHeight);
            double percentage = Double.valueOf(4) / Double.valueOf(averageSize);
            double height = percentage * rectAgHeight;
            rectPath.lineTo(rectSize, (float) (startHeight - height));
            rectPaint.setColor(textColor);
            canvas.drawPath(rectPath, rectPaint);
            //绘制下方的文字
            textPaint.setColor(lineColor);
            canvas.drawText("0" + (i + 1) + "日", rectSize - 25, startHeight + 50, textPaint);
            rectSize += widthBg / 7;
        }
        //绘制底部波纹
        weavPaint.setColor(textColor);
        weavPath.moveTo(0, heightBg);
        weavPath.lineTo(0, heightBg * 10 / 12);
        weavPath.cubicTo(widthBg * 1 / 10, heightBg * 10 / 12, widthBg * 3 / 10, heightBg * 11 / 12, widthBg, heightBg * 10 / 12);
        weavPath.lineTo(widthBg, heightBg);
        weavPath.lineTo(0, heightBg);
        canvas.drawPath(weavPath, weavPaint);

        //绘制底部文字
        weavPaint.setColor(Color.WHITE);
        weavPaint.setTextSize(widthBg / 20);
        canvas.drawText("成绩不错,继续努力哟!", widthBg * 1 / 10 - 20, heightBg * 11 / 12 + 50, weavPaint);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;
        //如果布局里面设置的是固定值,这里取布局里面的固定值;如果设置的是match_parent,则取父布局的大小
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {

            //如果布局里面没有设置固定值,这里取布局的宽度的1/2
            width = widthSize * 1 / 2;
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            //如果布局里面没有设置固定值,这里取布局的高度的3/4
            height = heightSize * 3 / 4;
        }
        widthBg = width;
        heightBg = height;
        setMeasuredDimension(width, height);
        startAnim();

    }

    @SuppressLint("NewApi")
	private void startAnim() {
        //步数动画的实现
        ValueAnimator walkAnimator = ValueAnimator.ofInt(0, mySize);
        walkAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @SuppressLint("NewApi")
			@TargetApi(Build.VERSION_CODES.HONEYCOMB)
			@Override
            public void onAnimationUpdate(ValueAnimator animation) {
                walkNum = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        //排名动画的实现
        ValueAnimator rankAnimator = ValueAnimator.ofInt(0, rank);
        rankAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                rankNum = (int) animation.getAnimatedValue();
                postInvalidate();
            }
        });

        double size = mySize;
        double avgSize = averageSize;
        if (size > avgSize) {
            size = avgSize;
        }
        //圆弧动画的实现
        ValueAnimator arcAnimator = ValueAnimator.ofFloat(0, (float) (size / avgSize * 300));
        arcAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                arcNum = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        animSet.setDuration(3000);
        animSet.playTogether(walkAnimator, rankAnimator, arcAnimator);
        animSet.start();
    }

    public void reSet(int mysize, int myrank, int myaverageSize) {
        walkNum = 0;
        arcNum = 0;
        rankNum = 0;
        mySize = mysize;
        rank = myrank;
        averageSize = myaverageSize;
        startAnim();
    }
}





非鹭千里
关注
专栏目录
Android绘图基础之Canvas & Paint & Rect & RectF
crazy_jack
06-22 5082
转载请注明出处：http://blog.csdn.net/crazy1235/article/details/73611978 Rect RectF Canvas Paint Point Line Arc Circle Oval Rect RoundRect Text Bitmap PathRect & RectFRectF和Rect都表示的是一个矩形的区域，他们的构造方法类似!不同的是，Rect
android drawpath填充,Android自定义View之Canvas的Path方法和Paint的DrawText的方法
weixin_35833704的博客
05-29 1083
本篇文章记录了一些觉得还是很有意思的一些方法,文章底部有自定义View的干货推荐哦！Canvas画路径初始化画笔工具mPaint.setColor(Color.RED);//设置画笔的颜色mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(4);//设置画笔宽度mPaint.setAntiAlias(true);画线(三角形)Path...
android canvas 简书,android自定义View三剑客paint，Canvas，path
weixin_35632257的博客
06-05 168
这篇主要是API，方便自己查阅。paint先上api，感谢分享https://blog.csdn.net/shell812/article/details/49781397?ref=myread常用API有//重置void reset();//将另外一个画笔的属性赋值过来void set(Paint src);//设置可兼容的缩放void setCompatibilityScaling(float...
Android自定义View工具：Paint&Canvas(一)
小马快跑的博客
03-07 494
安卓的graphics提供了2D图形各种绘制工具，如Canvas(画布), color filters(颜色过滤器), points(点), rectangles(矩形)等，利用这些工具可以直接在界面上进行绘制。 本文主要讲的是自定义View时我们经常用到的Canvas和Paint，像平时画画一样，我们需要画布和画笔，而Canvas就是画布，Paint就是画笔. Canvas官网地址: https://developer.android.com/reference/android/graphics/Canv
自定义View 之 Rect与RectF
wcl_csdn的博客
11-21 310
public class RectView extends View { private Paint mPaint; private RectF mRect; private float mX; private float mY; public RectView(Context context) { super(context); ...
android点击左上角划出,使用Android中的Path和RectF在左上角右上角左下角绘制圆角...
weixin_33994823的博客
05-26 1076
有一个Path#addRoundRect()重载,它接受一个包含八个值的float数组,其中我们可以为四个角中的每一个指定x和y半径.这些值为[x,y]对,从左上角开始,顺时针绕其余部分.对于我们想要舍入的那些角,我们将该对的两个值都设置为半径值,并将它们保留为零,而不是那些.作为一个说明性示例,一个简单的方法将返回可在您的代码段中使用的Path：private Path getPath(floa...
自定义View，和Canvas(画布)，Paint(画笔)，Path(路径)的用法
N_Y_S的博客
08-05 687
怎么自定义控件，Canvas画布，Paint画笔，Path路径的使用
Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)
09-02
在Android编程中，Canvas是用于在屏幕上绘制图形的重要类，而Path则是用来描述复杂路径的工具，能够绘制出各种形状，如圆形、矩形、椭圆以及不规则多边形等。下面我们将深入探讨如何利用Path在Canvas上绘制这些基本...
Android自定义View，绘制Path相交，使用Canvas.clipPath代替Path.op
bingma1995的博客
11-12 1778
如果只是单纯的绘制两个Path交集的话，不妨采用Canvas.clipPath的方法。用其中一个path当作clipPath，其中一个drawPath，即可画出想要的效果。
android 画圆环表示收益所占比重
小辉辉的android成长日记
09-29 786
因为工作项目需要，做了一个圆环控件，表示各部分收益
Android自定义View之Canvas的使用
weixin_33910460的博客
08-05 360
Android自定义View系列 Android自定义View之Paint绘制文字和线 Android自定义View注意事项 Android自定义View之图像的色彩处理 Android自定义View之图片外形特效——轻松实现圆角和圆形图片 Android自定义View之双缓冲机制和SurfaceView Android自定义View之invalidate方法和postInvalidate方法 ...
Android自定义View的Canvas操作
qq_29269095的博客
06-01 1053
最近发现一篇关于自定义View的博客，LZ正在学习，在这里作为整理学习笔记，与大家分享。博客的地址http://www.gcssloop.com/#blog。 1、Canvas简介 Canvas翻译为画布，能够在上面绘制图形和我们想要的东西，是Android平台2D的绘制基础。 特点： 1.可操作性强：由于这些是构成上层的基础，所以可操作性必然十分强大。 2.比较难用：各种方法太过基础，想
Android常用的canvas方法,Android 自定义 View Canvas 基本操作
weixin_33489687的博客
05-25 282
实现的效果图效果图主要用到的知识点有：canvas.save();canvas.restore();canvas.translate();canvas.scale();canvas.rotate();canvas.save()和canvas.restore() 是成对出现的，canvas.save()函数在前，·canvas.restore()函数在后，用来保证在这两个函数之间所做的操作不会对原来...
自定义View中Canvas之Path的详解
LayneYao的博客
09-10 5555
上一篇Canvas的绘制图形只能绘制一些常规的，比如点、线、圆、椭圆、矩形等的。如果想要绘制更复杂的图形，那么就得靠Path了。 Path的定义： Path类将多种符合路径（多个轮廓，如直线段、二次曲线、立方曲线等）封装在其内部的几何路径。 Path的绘制： 通过设置Paint.Style的FILL(只描内容)、STROKE(只描边)、FILL_AND_STROKE(描边和内容)，然后调用...
Canvas详解(android自定义view,onDraw()绘制各种图形)
fengzi
08-13 6299
Canvas Canvas:The Canvas class holds the “draw” calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a dra...
Android使用Paint 和 Canvas 的相关知识，自定义 View 实现一系列效果动画
qq_41902743的博客
06-10 820
Android使用Paint 和 Canvas 的相关知识，自定义 View 实现一系列效果动画 1.Canvas和Panit的基本使用 1.1:Paint类介绍 ​ Paint即画笔，在绘图过程中起到了极其重要的作用，画笔主要保存了颜色， 样式等绘制信息，指定了如何绘制文本和图形，画笔对象有很多设置方法， 大体上可以分为两类，一类与图形绘制相关，一类与文本绘制相关。 我这次主要是用到了与图形绘制相关的，所以主要介绍与图形绘制相关 *无参创建画笔对象 mPaint = new Paint();
Android自定义View（三）-Draw原理篇
柚子君的小窝
09-22 927
Android自定义View通常需要经过measure、layout和draw过程。 如果你没有了解过measure过程，可以先看看这篇文章。 如果你没有了解过layout过程，可以先看看这篇文章。 一、draw的作用：绘制View视图 二、draw过程：类似measure和layout过程，draw过程也分为两种情况 View类型 Draw过程 单一View 仅绘制Vi...
android paint类 方法全解析
zhou699的专栏
02-06 4090
/** * Paint类介绍 * * Paint即画笔，在绘图过程中起到了极其重要的作用，画笔主要保存了颜色， * 样式等绘制信息，指定了如何绘制文本和图形，画笔对象有很多设置方法， * 大体上可以分为两类，一类与图形绘制相关，一类与文本绘制相关。 * * 1.图形绘制
Android编程：Canvas详解与图形绘制实战
"Android编程之canvas...掌握Canvas的使用是Android开发中的一项基本技能，它为开发者提供了绘制自定义界面和创建动态效果的强大工具。通过熟练运用Canvas的各种方法，开发者可以构建出具有独特视觉体验的应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值