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的文章已经非常多了,我为什么写这篇文章,对于刚開始学习的人或者对自己定义组件比較生疏的朋友尽管能够拿来主义的用了,可是要一步一步的实现和了解当中的过程和原理才干真真脱离别 ...
随机推荐
- 名字修饰约定extern "C"与extern "C++"浅析
所谓名字修饰约定,就是指变量名.函数名等经过编译后重新输出名称的规则. 比如源代码中函数名称为int Func(int a,int b),经过编译后名称可能为?Func@@YAHHH@Z.?Func@ ...
- Python -- 堆数据结构 heapq - I love this game! - 博客频道 - CSDN.NET
Python -- 堆数据结构 heapq - I love this game! - 博客频道 - CSDN.NET Python -- 堆数据结构 heapq 分类: Python 2012-09 ...
- c 可变参数 定义可变参数的函数
定义可变参数的函数,需要在stdarg.h头文件中定义的va_list类型和va_start.va_arg.va_end三个宏. 定义可变参数函数 va_list ap; //实际是定义一个指针va ...
- Java并发编程--Fork/Join框架使用
上篇博客我们介绍了通过CyclicBarrier使线程同步,可是上述方法存在一个问题,那就是假设一个大任务跑了2个线程去完毕.假设线程2耗时比线程1多2倍.线程1完毕后必须等待线程2完毕.等待的过程线 ...
- Android开发周报：反编译对抗研究、动手制作智能镜子
新闻 <Android Wear落地中国 谷歌增强安卓生态控制力> :9月8日,由摩托罗拉推出的智能手表Moto 360二代作为国内发售的第一款搭载官方Android Wear的设备,正式 ...
- 【CSS3】transform-origin原点旋转
忙乱, 点 -moz-transform-origin: 0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0; 以右上角给原点 -mo ...
- mongodb中的排序和索引快速学习
在mongodb中,排序和索引其实都是十分容易的,先来小结下排序: 1 先插入些数据 db.SortTest.insert( { name : "Denis", age : ...
- Net处理html页面元素工具类(HtmlAgilityPack.dll)的使用
现在,在不少应用场合中都希望做到数据抓取,特别是基于网页部分的抓取.其实网页抓取的过程实际上是通过编程的方法,去抓取不同网站网页后,再进行 分析筛选的过程.比如,有的比较购物网站,会同时去抓取不同购物 ...
- A Game of Thrones(9) - Tyrion
Somewhere in the great stone maze(迷宫:迷惑) of Winterfell, a wolf howled. The sound hung over the castl ...
- COST CUTTING THE ALAN GREENBERG WAY
AnatBird.com COST CUTTING THE ALAN GREENBERG WAY