Android自己定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形，Android的开源项目中为我们提供了非常多插件，可是非常多时候我们须要依据详细项目自己定义这些图表，这一篇文章我们一起来看看怎样在Android中使用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);
}
以下我们将上面代码改动。让折线以下的区域颜色填充
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() { @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);
}
}
}
上面的效果有时候还是达不到我们的要求，我们将代码改动后效果例如以下：
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() { @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);
}
}
}
感谢你对“阳光小强"的关注，我的另一篇博文非常荣幸參加了CSDN举办的博文大赛。假设你觉的小强的博文对你有帮助。请为小强投上你宝贵的一票，投票地址： articleid=30101091">http://vote.blog.csdn.net/Article/Details? articleid=30101091
Android自己定义组件系列【9】——Canvas绘制折线图的更多相关文章
- Android自定义组件系列【9】——Canvas绘制折线图
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- Android自己定义组件系列【7】——进阶实践（4）
上一篇<Android自己定义组件系列[6]--进阶实践(3)>中补充了关于Android中事件分发的过程知识.这一篇我们接着来分析任老师的<可下拉的PinnedHeaderExpa ...
- Android自己定义组件系列【6】——进阶实践（3）
上一篇<Android自己定义组件系列[5]--进阶实践(2)>继续对任老师的<可下拉的PinnedHeaderExpandableListView的实现>进行了分析,这一篇计 ...
- Android自己定义组件系列【5】——进阶实践（2）
上一篇<Android自己定义组件系列[5]--进阶实践(1)>中对任老师的<可下拉的PinnedHeaderExpandableListView的实现>前一部分进行了实现,这 ...
- Android自己定义组件系列【4】——自己定义ViewGroup实现双側滑动
在上一篇文章<Android自己定义组件系列[3]--自己定义ViewGroup实现側滑>中实现了仿Facebook和人人网的側滑效果,这一篇我们将接着上一篇来实现双面滑动的效果. 1.布 ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- Android自己定义组件系列【3】——自己定义ViewGroup实现側滑
有关自己定义ViewGroup的文章已经非常多了,我为什么写这篇文章,对于刚開始学习的人或者对自己定义组件比較生疏的朋友尽管能够拿来主义的用了,可是要一步一步的实现和了解当中的过程和原理才干真真脱离别 ...
随机推荐
- 解决xShell4某些情况下按删除键会输出^H的问题
当我们用Xshell登录进入linux后,在普通模式下,对输入进行删除等操作没有问题. 而在执行中,按delete,backspace键时会产生^H等乱码问题. 这是由于编码不匹配的问题. 解决方法: ...
- H264 Decoder
http://www.cnblogs.com/mcodec/category/213433.html
- 解决AngularJS和Django模板标签冲突问题
原地址 Django和AngularJS在模板中使用同样的符号来引用变量,例如 {{variable_name}}. 有两种解决办法,各有利弊.一个修改AngularJS模板语法,另一个使用Djang ...
- poj3694（tarjan缩点+lca）
传送门:Network 题意:给你一个连通图,然后再给你n个询问,每个询问给一个点u,v表示加上u,v之后又多少个桥. 分析:方法(1219ms):用并查集缩点,把不是桥的点缩成一个点,然后全图都是桥 ...
- Burp Suite抓包、截包和改包
Burp Suite..呵呵.. 听说Burp Suite是能够监測.截取.改动我们訪问web应用的数据包,这么牛X? 条件:本地网络使用代理.由Burp Suite来代理.也就是说,每一个流出外网的 ...
- 使用COM提供SafeArray数据
在前一篇博文<读取SafeArray数据>我们介绍了C#读取安全数组.那么我们的COM怎么编写呢? 1. 定义SAFEARRAY变量 SAFEARRAY *pSArray = NULL; ...
- Java PreparedStatement
PreparedStatement是一个用于运行sql语句的标准接口的对象.它是继承与Statement.依据里氏代换原则.用Statement运行的语句,一定能够用Prepared替换了.那么他们之 ...
- [leetcode]3 Sum closest
问题叙述性说明: Given an array S of n integers, find three integers in S such that the sum is closest to a ...
- sar使用说明
sar这东西,一开始还以为是内部有的,原来是外部的工具,可以到 http://pagesperso-orange.fr/sebastien.godard/download.html 去下载 1 安装 ...
- MVAPI第一个版本架构图
MVAPI采用矢量与栅格结合的方式进行移动地图的显示. 进过几个月,目前终于可以完成基本的地图显示及操作功能.还有待实现的是各种性能及效果优化.3D地物等. 发一个1.0的架构图留存一下.(虽然目前还 ...