Android自己定义组件系列【9】——Canvas绘制折线图

时间：2023-03-09 04:32:03
Android自己定义组件系列【9】——Canvas绘制折线图

有时候我们在项目中会遇到使用折线图等图形，Android的开源项目中为我们提供了非常多插件，可是非常多时候我们须要依据详细项目自己定义这些图表，这一篇文章我们一起来看看怎样在Android中使用Canvas绘制折线图。

先看看绘制的效果：

Android自己定义组件系列【9】——Canvas绘制折线图

实现原理非常easy，我就直接给出代码：

package com.example.testcanvasdraw;

import java.util.ArrayList;

import java.util.List;

import java.util.Random;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.os.Handler;

import android.os.Message;

import android.util.AttributeSet;

import android.view.View;

public class MyView extends View{

	private int XPoint = 60;

	private int YPoint = 260;

	private int XScale = 8;  //刻度长度

	private int YScale = 40;

	private int XLength = 380;

	private int YLength = 240;

	private int MaxDataSize = XLength / XScale;

	private List<Integer> data = new ArrayList<Integer>();

	private String[] YLabel = new String[YLength / YScale];

	private Handler handler = new Handler(){

		public void handleMessage(Message msg) {

			if(msg.what == 0x1234){

				MyView.this.invalidate();

			}

		};

	};

	public MyView(Context context, AttributeSet attrs) {

		super(context, attrs);

		for(int i=0; i<YLabel.length; i++){

			YLabel[i] = (i + 1) + "M/s";

		}

		new Thread(new Runnable() {

			@Override

			public void run() {

				while(true){

					try {

						Thread.sleep(1000);

					} catch (InterruptedException e) {

						e.printStackTrace();

					}

					if(data.size() >= MaxDataSize){

						data.remove(0);

					}

					data.add(new Random().nextInt(4) + 1);

					handler.sendEmptyMessage(0x1234);

				}

			}

		}).start();

	}

	@Override

	protected void onDraw(Canvas canvas) {

		super.onDraw(canvas);

		Paint paint = new Paint();

		paint.setStyle(Paint.Style.STROKE);

		paint.setAntiAlias(true); //去锯齿

		paint.setColor(Color.BLUE);

		//画Y轴

		canvas.drawLine(XPoint, YPoint - YLength, XPoint, YPoint, paint);

		//Y轴箭头

		canvas.drawLine(XPoint, YPoint - YLength, XPoint - 3, YPoint-YLength + 6, paint);  //箭头

	    canvas.drawLine(XPoint, YPoint - YLength, XPoint + 3, YPoint-YLength + 6 ,paint);

	    //加入刻度和文字

	    for(int i=0; i * YScale < YLength; i++) {

	    	canvas.drawLine(XPoint, YPoint - i * YScale, XPoint + 5, YPoint - i * YScale, paint);  //刻度

	    	canvas.drawText(YLabel[i], XPoint - 50, YPoint - i * YScale, paint);//文字

	    }

		//画X轴

		canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, paint);

		System.out.println("Data.size = " + data.size());

		if(data.size() > 1){

			for(int i=1; i<data.size(); i++){

			    canvas.drawLine(XPoint + (i-1) * XScale, YPoint - data.get(i-1) * YScale,

			    		XPoint + i * XScale, YPoint - data.get(i) * YScale, paint);

			}

		}

	}

}

上面绘制折线部分我们另一种方式相同能够实现： 

		if(data.size() > 1){

			Path path = new Path();

			path.moveTo(XPoint, YPoint - data.get(0) * YScale);

			for(int i=1; i<data.size(); i++){

				path.lineTo(XPoint + i * XScale, YPoint - data.get(i) * YScale);

			}

			canvas.drawPath(path, paint);

		}

以下我们将上面代码改动。让折线以下的区域颜色填充

Android自己定义组件系列【9】——Canvas绘制折线图

package com.example.testcanvasdraw;

import java.util.ArrayList;

import java.util.List;

import java.util.Random;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.os.Handler;

import android.os.Message;

import android.util.AttributeSet;

import android.view.View;

/**

 *

 * @author 阳光小强

 * http://blog.****.net/dawanganban

 *

 */

public class MyView extends View {

	private int XPoint = 60;

	private int YPoint = 260;

	private int XScale = 8; // 刻度长度

	private int YScale = 40;

	private int XLength = 380;

	private int YLength = 240;

	private int MaxDataSize = XLength / XScale;

	private List<Integer> data = new ArrayList<Integer>();

	private String[] YLabel = new String[YLength / YScale];

	private Handler handler = new Handler() {

		public void handleMessage(Message msg) {

			if (msg.what == 0x1234) {

				MyView.this.invalidate();

			}

		};

	};

	public MyView(Context context, AttributeSet attrs) {

		super(context, attrs);

		for (int i = 0; i < YLabel.length; i++) {

			YLabel[i] = (i + 1) + "M/s";

		}

		new Thread(new Runnable() {

			@Override

			public void run() {

				while (true) {

					try {

						Thread.sleep(1000);

					} catch (InterruptedException e) {

						e.printStackTrace();

					}

					if (data.size() >= MaxDataSize) {

						data.remove(0);

					}

					data.add(new Random().nextInt(4) + 1);

					handler.sendEmptyMessage(0x1234);

				}

			}

		}).start();

	}

	@Override

	protected void onDraw(Canvas canvas) {

		super.onDraw(canvas);

		Paint paint = new Paint();

		paint.setStyle(Paint.Style.STROKE);

		paint.setAntiAlias(true); // 去锯齿

		paint.setColor(Color.BLUE);

		// 画Y轴

		canvas.drawLine(XPoint, YPoint - YLength, XPoint, YPoint, paint);

		// Y轴箭头

		canvas.drawLine(XPoint, YPoint - YLength, XPoint - 3, YPoint - YLength

				+ 6, paint); // 箭头

		canvas.drawLine(XPoint, YPoint - YLength, XPoint + 3, YPoint - YLength

				+ 6, paint);

		// 加入刻度和文字

		for (int i = 0; i * YScale < YLength; i++) {

			canvas.drawLine(XPoint, YPoint - i * YScale, XPoint + 5, YPoint - i

					* YScale, paint); // 刻度

			canvas.drawText(YLabel[i], XPoint - 50, YPoint - i * YScale, paint);// 文字

		}

		// 画X轴

		canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, paint);

		// 绘折线

		/*

		 * if(data.size() > 1){ for(int i=1; i<data.size(); i++){

		 * canvas.drawLine(XPoint + (i-1) * XScale, YPoint - data.get(i-1) *

		 * YScale, XPoint + i * XScale, YPoint - data.get(i) * YScale, paint); }

		 * }

		 */

		paint.setStyle(Paint.Style.FILL);

		if (data.size() > 1) {

			Path path = new Path();

			path.moveTo(XPoint, YPoint);

			for (int i = 0; i < data.size(); i++) {

				path.lineTo(XPoint + i * XScale, YPoint - data.get(i) * YScale);

			}

			path.lineTo(XPoint + (data.size() - 1) * XScale, YPoint);

			canvas.drawPath(path, paint);

		}

	}

}

上面的效果有时候还是达不到我们的要求，我们将代码改动后效果例如以下：

Android自己定义组件系列【9】——Canvas绘制折线图

package com.example.testcanvasdraw;

import java.util.ArrayList;

import java.util.List;

import java.util.Random;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Path;

import android.os.Handler;

import android.os.Message;

import android.util.AttributeSet;

import android.view.View;

/**

 *

 * @author 阳光小强 http://blog.****.net/dawanganban

 *

 */

public class MyView extends View {

	private int XPoint = 60;

	private int YPoint = 260;

	private int XScale = 8; // 刻度长度

	private int YScale = 40;

	private int XLength = 380;

	private int YLength = 240;

	private int MaxDataSize = XLength / XScale;

	private List<Integer> data = new ArrayList<Integer>();

	private String[] YLabel = new String[YLength / YScale];

	private Handler handler = new Handler() {

		public void handleMessage(Message msg) {

			if (msg.what == 0x1234) {

				MyView.this.invalidate();

			}

		};

	};

	public MyView(Context context, AttributeSet attrs) {

		super(context, attrs);

		for (int i = 0; i < YLabel.length; i++) {

			YLabel[i] = (i + 1) + "M/s";

		}

		new Thread(new Runnable() {

			@Override

			public void run() {

				while (true) {

					try {

						Thread.sleep(1000);

					} catch (InterruptedException e) {

						e.printStackTrace();

					}

					if (data.size() >= MaxDataSize) {

						data.remove(0);

					}

					data.add(new Random().nextInt(4) + 1);

					handler.sendEmptyMessage(0x1234);

				}

			}

		}).start();

	}

	@Override

	protected void onDraw(Canvas canvas) {

		super.onDraw(canvas);

		Paint paint = new Paint();

		paint.setStyle(Paint.Style.STROKE);

		paint.setAntiAlias(true); // 去锯齿

		paint.setColor(Color.BLUE);

		// 画Y轴

		canvas.drawLine(XPoint, YPoint - YLength, XPoint, YPoint, paint);

		// Y轴箭头

		canvas.drawLine(XPoint, YPoint - YLength, XPoint - 3, YPoint - YLength

				+ 6, paint); // 箭头

		canvas.drawLine(XPoint, YPoint - YLength, XPoint + 3, YPoint - YLength

				+ 6, paint);

		// 加入刻度和文字

		for (int i = 0; i * YScale < YLength; i++) {

			canvas.drawLine(XPoint, YPoint - i * YScale, XPoint + 5, YPoint - i

					* YScale, paint); // 刻度

			canvas.drawText(YLabel[i], XPoint - 50, YPoint - i * YScale, paint);// 文字

		}

		// 画X轴

		canvas.drawLine(XPoint, YPoint, XPoint + XLength, YPoint, paint);

		// 绘折线

		/*

		 * if(data.size() > 1){ for(int i=1; i<data.size(); i++){

		 * canvas.drawLine(XPoint + (i-1) * XScale, YPoint - data.get(i-1) *

		 * YScale, XPoint + i * XScale, YPoint - data.get(i) * YScale, paint); }

		 * }

		 */

		paint.setColor(Color.RED);

		paint.setStrokeWidth(5);

		Paint paint2 = new Paint();

		paint2.setColor(Color.BLUE);

		paint2.setStyle(Paint.Style.FILL);

		if (data.size() > 1) {

			Path path = new Path();

			Path path2 = new Path();

			path.moveTo(XPoint, YPoint - data.get(0) * YScale);

			path2.moveTo(XPoint, YPoint);

			for (int i = 0; i < data.size(); i++) {

				path.lineTo(XPoint + i * XScale, YPoint - data.get(i) * YScale);

				path2.lineTo(XPoint + i * XScale, YPoint - data.get(i) * YScale);

			}

			path2.lineTo(XPoint + (data.size() - 1) * XScale, YPoint);

			canvas.drawPath(path, paint);

			canvas.drawPath(path2, paint2);

		}

	}

}

感谢你对“阳光小强"的关注，我的另一篇博文非常荣幸參加了****举办的博文大赛。假设你觉的小强的博文对你有帮助。请为小强投上你宝贵的一票，投票地址：

articleid=30101091">http://vote.blog.****.net/Article/Details?

articleid=30101091

相关文章