Android自定义组件系列【9】——Canvas绘制折线图
来源:互联网 发布:加工中心编程培训 编辑:程序博客网 时间:2024/05/16 13:29
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用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.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() {@Overridepublic 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();}@Overrideprotected 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);}下面我们将上面代码修改,让折线下面的区域颜色填充
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.csdn.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() {@Overridepublic 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();}@Overrideprotected 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);}}}
上面的效果有时候还是达不到我们的要求,我们将代码修改后效果如下:
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.csdn.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() {@Overridepublic 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();}@Overrideprotected 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);}}}
感谢你对“阳光小强"的关注,我的另一篇博文很荣幸参加了CSDN举办的博文大赛,如果你觉的小强的博文对你有帮助,请为小强投上你宝贵的一票,投票地址:http://vote.blog.csdn.net/Article/Details?articleid=30101091
29 0
- Android自定义组件系列【9】——Canvas绘制折线图
- android canvas绘制折线图和柱状图
- android中利用Canvas绘制折线图
- Android自定义视图二:用Canvas和Paint绘制折线图
- Android 自定义view绘制折线图
- Android自定义控件系列四:绘制实用型的柱形图和折线图
- android 绘制折线图
- android绘制折线图
- android绘制折线图
- 利用 html5 canvas 简单绘制折线图
- 利用canvas实现折线图的绘制
- 用canvas绘制的折线图 +解析
- html5 canvas 实现简单绘制折线图
- UGUI 绘制自定义折线图
- Android 项目(一):自定义View绘制“折线图”
- Android自定义控件之《折线图的绘制》
- Android 自定义View之绘制折线图、曲线图
- 【自定义控件系列四】android绘制实战(一)通过Canvas+Path+Paint组合绘制图表
- 在iOS中使用ZBar扫描二维码和条形码
- 视频&音频格式的编解码简单认识
- Java学习总结12——网络1(Java Socket参数详解)
- c语言(三种语言对比、数据类型及输出、变量存储、内存分配)
- 简单的TableView通讯录
- Android自定义组件系列【9】——Canvas绘制折线图
- 无向图的双连通分量
- ajax+php实例
- linux使用
- 一个web服务器的实现
- 设计文本框(输入密码,确定,取消)
- MongoDB -- Error: unclean shutdown detected
- STL源码剖析---vector
- 微信5.0公众平台企业服务号和订阅号如何申请?