自定义view-canvas练习

来源:互联网 发布:蜂窝移动网络搜索定位 编辑:程序博客网 时间:2024/05/19 17:25

          效果图如下:

           

           一.图形拆解

             1.外面大圆

             2.刻度

             3.中间两个小圆和指针

              

         1.绘制最外面大圆

          刚开始先初始画笔对象

         

 Paint paint;    public DrawCircleView(Context context, AttributeSet attrs)    {        super(context, attrs);        paint = new Paint();        paint.setColor(Color.RED);        paint.setStrokeWidth(3);        paint.setStyle(Paint.Style.STROKE);        paint.setAntiAlias(true);    }
        然后将canvas的坐标原点移到视图的中心点,主要为接下来画刻度,旋转画布的时候做铺垫

canvas.translate(canvas.getWidth()/2,200);

        接下来画圆形 canvas有很多画图形的方法,使用canvas的drawCircle方法 

        

 canvas.drawCircle(0,0,100,paint);

2.画刻度

       首先刻度从正下方画起,刻度总共有60个,其中有12个刻度比较长,这时候就可以分两种情况进行画刻度

        

  float y = 100;        int count =60;        for (int i=0; i < count; i++){            if (i % 5 == 0){                canvas.drawLine(0f,y,0f,y+12f,tmpPaint);                float textwidth = tmpPaint.measureText(String.valueOf(i/5+1));                float texthegiht = tmpPaint.measureText("12");                canvas.drawText(String.valueOf(i/5+1),-textwidth/2,y+12f + texthegiht,tmpPaint);            }else {                canvas.drawLine(0f,y,0f,y+5f,tmpPaint);            }            canvas.rotate(360/count,0,0);        }
3.画中心两个圆和指针

画两个小圆只需改变半径即可,画指针使用canvas的drawLine方法

  tmpPaint.setColor(Color.GRAY);        tmpPaint.setStrokeWidth(4);        canvas.drawCircle(0,0,7,tmpPaint);        tmpPaint.setStyle(Paint.Style.FILL);        tmpPaint.setColor(Color.RED);        canvas.drawCircle(0,0,5,tmpPaint);        canvas.drawLine(0,10,0,-65,paint);

这样一个仪表盘的效果就完成了.

原创粉丝点击