资源经验分享自定义View画直线、圆环数据变动View

自定义View画直线、圆环数据变动View

2019-10-22 | |  63 |   0

原标题:自定义View画直线、圆环数据变动View

原文来自:CSDN      原文链接:http://www.xinhuanet.com/2019-09/09/c_1124976366.htm


效果m.gif

绘制直线

首先我们了解下自定义View

 /**
     * 测量的方法
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);    }    /**
     * 定位的方法
     * @param changed
     * @param left
     * @param top
     * @param right
     * @param bottom
     */    @Override    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        super.onLayout(changed, left, top, right, bottom);    }    /**
     * 绘制View的方法
     * @param canvas
     */    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);    }12345678910111213141516171819202122232425262728293031

知道了这些下面我们开始绘制直线

  //画笔
 Paint red=new Paint();
 Paint green=new Paint();
 Paint text=new Paint();
 Paint black=new Paint();12345

这就是我们的画笔

现在开始给画笔安装笔芯

  //颜色
        red.setColor(Color.RED);        //宽度
        red.setStrokeWidth(50);
        red.setAntiAlias(true);
        red.setStyle(Paint.Style.FILL);        //抗锯齿功能
        green.setAntiAlias(true);
        green.setColor(Color.GREEN);
        green.setStyle(Paint.Style.FILL);        //Paint.Style.FILL :填充内部        // Paint.Style.FILL_AND_STROKE :填充内部和描边        // Paint.Style.STROKE :仅描边
        green.setStrokeWidth(50);

        text.setStrokeWidth(4);
        text.setColor(Color.BLACK);
        text.setTextSize(30);        //绘制文字的笔
        black.setColor(Color.BLACK);
        black.setStrokeWidth(2);
        black.setStyle(Paint.Style.STROKE);1234567891011121314151617181920212223

笔芯装完

开始画!

  //画出红线
        canvas.drawLine(0,70,redLength,70,red);        //画出绿线
        canvas.drawLine(0,70,greenLength,70,green);        //画出文字
        canvas.drawText(end+"",end,25, text);
        canvas.drawText(start+"",0,25, text);1234567

直线画完了

最后我们添加上刷新的方法

//刷新        invalidate();12

完整代码

public class DrawLine  extends View {    //画笔
    Paint red=new Paint();
    Paint green=new Paint();
    Paint text=new Paint();
    Paint black=new Paint();    /**
     * 整体长度
     */    private float  redLength=400;    /**
     * 进度长度
     */    private  float  greenLength=200;    /**
     * 起点显示文本
     */    private  float  start=0;    /**
     * 进度条显示文本
     */    private  float end=greenLength;    public float getRedLength() {        return redLength;    }    public float getStart() {        return start;    }    public void setStart(float start) {        this.start = start;    }    public float getEnd() {        return end;    }    public void setEnd(float end) {        this.end = end;    }    public void setRedLength(float redLength) {        this.redLength = redLength;    }    public float getGreenLength() {        return greenLength;    }    public void setGreenLength(float greenLength) {        this.greenLength = greenLength;    }    public DrawLine(Context context) {        super(context);    }    /**
     * 绘制直线
     * @param canvas
     */    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //颜色
        red.setColor(Color.RED);        //宽度
        red.setStrokeWidth(50);
        red.setAntiAlias(true);
        red.setStyle(Paint.Style.FILL);        //抗锯齿功能
        green.setAntiAlias(true);
        green.setColor(Color.GREEN);
        green.setStyle(Paint.Style.FILL);        //Paint.Style.FILL :填充内部        // Paint.Style.FILL_AND_STROKE :填充内部和描边        // Paint.Style.STROKE :仅描边
        green.setStrokeWidth(50);

        text.setStrokeWidth(4);
        text.setColor(Color.BLACK);
        text.setTextSize(30);        //绘制文字的笔
        black.setColor(Color.BLACK);
        black.setStrokeWidth(2);
        black.setStyle(Paint.Style.STROKE);        //画出红线
        canvas.drawLine(0,70,redLength,70,red);        //画出绿线
        canvas.drawLine(0,70,greenLength,70,green);        //画出文字
        canvas.drawText(end+"",end,25, text);
        canvas.drawText(start+"",0,25, text);        //刷新        invalidate();    }}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103

代码其实很少,我添加了些get、set方法

绘制圆环

同样的我们要有一支笔

 mPaint = new Paint();1

给笔装上笔芯

   mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
       mPaint.setAntiAlias(true); // 消除锯齿
       mPaint.setStyle(Paint.Style.STROKE); // 设置空心123

好了现在我们开始画

 		RectF oval = new RectF(center - radius, center - radius,
 		 center + radius, center + radius); // 用于定义的圆弧的形状和大小的界限
       ArrayList list=new ArrayList();
       mPaint.setColor(mFirstColor); // 设置圆环的颜色
       canvas.drawCircle(center, center, radius, mPaint); // 画出圆环
       mPaint.setColor(mSecondColor); // 设置圆环的颜色
       canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧       /**
        * oval :指定圆弧的外轮廓矩形区域。
        * startAngle: 圆弧起始角度,单位为度。
        * sweepAngle: 圆弧扫过的角度,顺时针方向,单位为度。
        * useCenter: 如果为True时,在绘制圆弧时将圆心包括在内,通常用来绘制扇形。
        * paint: 绘制圆弧的画板属性,如颜色,是否填充等。
        */123456789101112131415

最后同样是刷新

 invalidate();1

完整代码

public class DrawCircle extends View {    /**
     * 第一种颜色
     */    private int mFirstColor=Color.parseColor("#fd0000");    /**
     * 第二种颜色
     */    private int mSecondColor=Color.parseColor("#0022ff");    /**
     * 圆弧的宽度
     */    private int mCircleWidth=60;    /**
     * 画笔
     */    private Paint mPaint;    public int getmProgress() {        return mProgress;    }    public void setmProgress(int mProgress) {        this.mProgress = mProgress;    }    /**
     * 圆弧的度数
     */    private int mProgress;    /**
     *圆环大小
     */    private int  mwidth=300;    public int getMwidth() {        return mwidth;    }    public void setMwidth(int mwidth) {        this.mwidth = mwidth;    }    public DrawCircle(Context context) {        super(context);
        mPaint = new Paint();    }    @Override    protected void onDraw(Canvas canvas) {        int center = getMwidth()/ 2;        int radius = center - mCircleWidth / 2;
        mPaint.setStrokeWidth(mCircleWidth); // 设置圆环的宽度
        mPaint.setAntiAlias(true); // 消除锯齿
        mPaint.setStyle(Paint.Style.STROKE); // 设置空心
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius); // 用于定义的圆弧的形状和大小的界限
        ArrayList list=new ArrayList();
        mPaint.setColor(mFirstColor); // 设置圆环的颜色
        canvas.drawCircle(center, center, radius, mPaint); // 画出圆环
        mPaint.setColor(mSecondColor); // 设置圆环的颜色
        canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧        /**
         * oval :指定圆弧的外轮廓矩形区域。
         * startAngle: 圆弧起始角度,单位为度。
         * sweepAngle: 圆弧扫过的角度,顺时针方向,单位为度。
         * useCenter: 如果为True时,在绘制圆弧时将圆心包括在内,通常用来绘制扇形。
         * paint: 绘制圆弧的画板属性,如颜色,是否填充等。
         */        invalidate();    }}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475

如有不足,请指出谢谢!

免责声明:本文来自互联网新闻客户端自媒体,不代表本网的观点和立场。

合作及投稿邮箱:E-mail:editor@tusaishared.com

上一篇:ES学习分享

下一篇:ES6中的几个String方法

用户评价
全部评价

热门资源

  • Python 爬虫(二)...

    所谓爬虫就是模拟客户端发送网络请求,获取网络响...

  • TensorFlow从1到2...

    原文第四篇中,我们介绍了官方的入门案例MNIST,功...

  • TensorFlow从1到2...

    “回归”这个词,既是Regression算法的名称,也代表...

  • 机器学习中的熵、...

    熵 (entropy) 这一词最初来源于热力学。1948年,克...

  • TensorFlow2.0(10...

    前面的博客中我们说过,在加载数据和预处理数据时...