Canvas和Paint画折线图

前言

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

正文

网上有很多关于折线图之类的功能，有简单的、复杂的。但是有一些折线图不利于扩展，很难拿到自己的项目中去运用。我给大家介绍的简单、使用，并且利于扩展，先看看我最初做成的样子吧：

后来公司又有一个项目用到了，就把它拿来修改一下，感觉效果还不错：

还可以吧！

这里主要用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这个类里面都有，也不进行讲解了；
代码下载地址，有不懂得或者意见的可以相互沟通，晚安。