Canvas和Paint画折线图

前言

前在Devstore上传了一个折线图的小功能,有挺多人下载的,所以今天把它拿来给大家分享一下。

正文

网上有很多关于折线图之类的功能,有简单的、复杂的。但是有一些折线图不利于扩展,很难拿到自己的项目中去运用。我给大家介绍的简单、使用,并且利于扩展,先看看我最初做成的样子吧:
Canvas和Paint画折线图_第1张图片
后来公司又有一个项目用到了,就把它拿来修改一下,感觉效果还不错:
Canvas和Paint画折线图_第2张图片
还可以吧!

这里主要用Canvas(画布)、Paint(画笔)、Color(颜色)、Bitmap(图像)这几种graphics中常用的类来实现,先来对它们进行讲解(这里我直接把从网上找了一下关于它们的讲解,感觉还不错就拿来了)。

1.Color(颜色)类:
  Android系统中颜色的常用表示方法有以下3种:
  (1)int color = Color.BLUE;
  (2)int color = Color.argb(150,200,0,100);
  (3)在xml文件中定义颜色;
  在实际应用当中,我们常用的颜色有以下一些,其颜色常量及其表示的颜色如下所示:
  Color.BLACK 黑色 Color.GREEN 绿色
  Color.BLUE 蓝色 Color.LTGRAY 浅灰色
  Color.CYAN 青绿色 Color.MAGENTA 红紫色
  Color.DKGRAY 灰黑色 Color.RED 红色
  Color.YELLOW 黄色 Color.TRANSPARENT 透明
  Color.GRAY 灰色 Color.WHITE 白色
2.Paint(画笔)类:
  要绘制图形,首先得调整画笔,按照自己的开发需要设置画笔的相关属性。Pain类的常用属性设置方法如下:
  setAntiAlias(); //设置画笔的锯齿效果
  setColor(); //设置画笔的颜色
  setARGB(); //设置画笔的A、R、G、B值
  setAlpha(); //设置画笔的Alpha值
  setTextSize(); //设置字体的尺寸
  setStyle(); //设置画笔的风格(空心或实心)
  setStrokeWidth(); //设置空心边框的宽度
  getColor(); //获取画笔的颜色
3.Canvas(画布)类:
  画笔属性设置好之后,还需要将图像绘制到画布上。Canvas类可以用来实现各种图形的绘制工作,如绘制直线、矩形、圆等等。Canvas绘制常用图形的方法如下:
  绘制直线:canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint);
  绘制矩形:canvas.drawRect(float left, float top, float right, float bottom, Paint paint);
  绘制圆形:canvas.drawCircle(float cx, float cy, float radius, Paint paint);
  绘制字符:canvas.drawText(String text, float x, float y, Paint paint);
  绘制图形:canvas.drawBirmap(Bitmap bitmap, float left, float top, Paint paint);
4.折线图的实现:
给大家讲的折线图的实现,分为两部分:
1、画横线,添加纵坐标;
2、根据坐标画出点,并划线连接每一个点;
5.代码实现:
这个功能的代码写的挺简单的,主要是三个类;一个主类(MainActivity),画纵坐标(ShiViews),画点和折线(ShiView);
首先看看一下布局activity_main.xml:

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="@color/black" >
    
    <LinearLayout 
      android:id="@+id/lays"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:background="@null">
    LinearLayout>
    
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:background="@null">
        <HorizontalScrollView 
           android:id="@+id/scrollview"
           android:layout_height="wrap_content"
           android:layout_width="fill_parent"
           android:scrollbars="none">
        <LinearLayout 
            android:id="@+id/lay"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
             android:orientation="horizontal">
        LinearLayout>
    HorizontalScrollView>
    FrameLayout>
FrameLayout>

MianActivity的主要代码:

    /** 画点和折线的类 */
    ShiView ssvv = new ShiView(context,temp,temps,time);
    LayoutParams lpp = new LayoutParams(1500, 600);
    ssvv.setLayoutParams(lpp);
    lay.addView(ssvv);
    /** 画纵坐标和横线 */
    ShiViews ssvvs = new ShiViews(context);
    LayoutParams lpps = new LayoutParams(1500, 600);
    ssvvs.setLayoutParams(lpps);
    lays.addView(ssvvs);

ShiView类:
ShiView继承于View类。然后,复写View类的onDraw()函数。在onDraw()函数中使用Paint和Canvas对象绘制我们需要的图形。
这里就直接给大家上代码吧,因为相对来说没有复杂的逻辑并且代码中有相关注释:

int[] temp = new int[7];
    int[] temps = new int[7];
    String[] dayTime = new String[7];
    private Context context;
    private Canvas canvass;
    private Paint paint;
    private Paint paints;
    public ShiView(Context context, int[] temp, int[] temps, String[] dayTime) {
        super(context);
        this.temp = temp;
        this.temps = temps;
        this.dayTime = dayTime;
        this.context = context;
    }
    public ShiView(Context context) {
        super(context);
    }
    public ShiView(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        canvass = canvas;
        paint = new Paint(); 
        paints = new Paint(); 
        /* 去锯齿 */ 
        paint.setAntiAlias(true); 
        paints.setAntiAlias(true); 

        //纵坐标
        paint.reset();
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.FILL); 
        paint.setStrokeWidth(2); 
        paint.setTextSize(20); 
        //横坐标
        for(int i=0;i<7;i++){
            canvas.drawText(dayTime[i], i*200+100, 590, paint);
        }
        //画折线
        paint.reset();
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE); 
        paint.setStrokeWidth(2); 
        paints.reset();
        paints.setColor(Color.RED);
        paints.setTextSize(25);
        paints.setStyle(Paint.Style.STROKE); 
        paints.setStrokeWidth(2); 
        Path path = new Path(); 
        Path paths = new Path(); 
        path.moveTo(115,  560-temp[0]*16);
        paths.moveTo(115,  560-temps[0]*16);
        for(int i=1;i<7;i++){
            path.lineTo(i*200+115,  560-temp[i]*16);
            paths.lineTo(i*200+115,  560-temps[i]*16);
        }
        canvas.drawPath(path, paint); 
        canvas.drawPath(paths, paint); 
        paint.reset();
        paint.setColor(Color.WHITE); 
        // 设置样式-填充 
        paint.setStyle(Style.FILL); 
        // 绘图 // 从资源文件中生成位图 
        for(int i=0;i<7;i++){
            int tempy = (int)temp[i];
            int tempsy = (int)temps[i];
            if((tempy - tempsy) < 4 && (tempy - tempsy) > 0){
                canvas.drawText(temp[i]+"", i*200+105, 540-temp[i]*(float)16, paints);
                canvas.drawText(temps[i]+"", i*200+105, 595-temps[i]*(float)16, paints);
            }else if((tempy - tempsy) > -4 && (tempy - tempsy) < 4 && (tempy - tempsy) < 0){
                canvas.drawText(temp[i]+"", i*200+105, 595-temp[i]*(float)16, paints);
                canvas.drawText(temps[i]+"", i*200+105, 540-temps[i]*(float)16, paints);
            }else{
                canvas.drawText(temp[i]+"", i*200+105, 540-temp[i]*(float)16, paints);
                canvas.drawText(temps[i]+"", i*200+105, 540-temps[i]*(float)16, paints);
            }
            canvas.drawCircle(i*200+115, 560-temp[i]*(float)16, 12, paint);
            canvas.drawCircle(i*200+115, 560-temps[i]*(float)16, 12, paint);
        }
    }
    /** 点击屏幕获得坐标判断点击位置 */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
          float x = event.getX();   
          float y = event.getY();   
          for(int i=0;i<7;i++){
              float tempx = i*200+115;
              float tempys = 560-temps[i]*(float)16;
              float tempy = 560-temp[i]*(float)16;
              if(x >= (tempx-15)  && x <= (tempx+15) && y <= tempys+15 && y >= tempys-15){
                  canvass.drawCircle(i*200+115, 560-temps[i]*(float)16, 12, paint);
                  Toast.makeText(context,temps[i]+"", Toast.LENGTH_SHORT).show();
                  break;
              }
              if(x >= (tempx-15)  && x <= (tempx+15) && y <= tempy+15 && y >= tempy-15){
                  Toast.makeText(context,temp[i]+"", Toast.LENGTH_SHORT).show();
                  break;
              }
          }
          return super.onTouchEvent(event);
    }

ShiViews类的相关内容在ShiView这个类里面都有,也不进行讲解了;
代码下载地址,有不懂得或者意见的可以相互沟通,晚安。

你可能感兴趣的:(Canvas和Paint画折线图)