Android 绘制动态图
最近准备技能大赛,需要将从传感器中读出的数据在移动客户端以图的形式绘制出来,因为平时很少绘图,于是各种查资料,算是勉强做出来了。
以下是大赛理论效果图(左)和实际效果图(右),真的是理想很丰满,现实很骨感啊!
制作的整体思路:
- 创建一个继承与View类自定义类
- 自定义类覆盖其中的onDraw()方法
- 在MainActivity中invalidate()方法来调用onDraw()方法来进行图形的重绘.
绘制一个基本表:
(注意:代码中使用了变量)
1、绘制矩形
Paint paint = new Paint();paint.setColor(Color.BLACK);paint.setStyle(Paint.Style.STROKE);Rect chartRec = new Rect(OFFSET_LEFT, OFFSET_TOP, CHARTW + OFFSET_LEFT,CHARTH + OFFSET_TOP);canvas.drawRect(chartRec, paint);
2、绘制左侧数值标记
canvas.drawText("100", OFFSET_LEFT - TEXT_OFFSET - 15, OFFSET_TOP + 5,paint);for (int i = 9; i > 0; i--) {canvas.drawText("" + 10 * (10 - i), OFFSET_LEFT - TEXT_OFFSET - 15,OFFSET_TOP + CHARTH / 10 * i, paint);}canvas.drawText("0", OFFSET_LEFT - TEXT_OFFSET - 10, OFFSET_TOP+ CHARTH, paint);
3、绘制虚线
DashPathEffect是PathEffect类的一个子类,可以使paint画出类似虚线的样子,并且可以任意指定虚实的排列方式。
代码中的float数组,必须是偶数长度,且>=2,指定了多少长度的实线之后再画多少长度的空白.
如本代码中,绘制长度2的实线,再绘制长度2的空白,再绘制长度2的实线,再绘制长度2的空白,依次重复.1是偏移量
PathEffect effects = new DashPathEffect(new float[] { 2, 2, 2, 2 }, 1);
这样一个基本的表格绘制完成。
动态改变界面的方法:
Handler handler=new Handler(); Runnable runnable=new Runnable(){@Overridepublic void run() {// TODO Auto-generated method stub//要做的事情handler.postDelayed(this, 1000);} };
在这里我们采用消息传递机制中Handler的postDelayed(Runnable, long) 方法做定时器,每隔一秒钟发送一次Runnable对象(该对象最后将会被封装成Message对象)执行一次子线程中的操作。
最后,贴上所有代码:
main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><LinearLayoutandroid:id="@+id/root"android:orientation = "vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"></LinearLayout></LinearLayout>
MainActivity.class
public class MainActivity extends Activity {private Handler handler;private DrawTest dtest;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);init();}private void init() {LinearLayout layout = (LinearLayout) findViewById(R.id.root);dtest = new DrawTest(this);dtest.invalidate();layout.addView(dtest);handler = new Handler();handler.post(new Runnable() {@Overridepublic void run() {dtest.invalidate();handler.postDelayed(this, 2000);}});} }
DrawTest.class
public class DrawTest extends View {private int CHARTH = 600;//表格的高private int CHARTW = 400;//表格的宽private int OFFSET_LEFT = 70;//距离左边界距离private int OFFSET_TOP = 80;//距离右边界距离private int TEXT_OFFSET = 20;//文本距离设置private int X_INTERVAL = 20;//X坐标间隔距离private List<Point> plist;//点集合public DrawTest(Context context) {super(context);plist = new ArrayList<Point>();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);drawTable(canvas);preparePoint();drawPoint(canvas);}/*** 绘制表* @param canvas*/private void drawTable(Canvas canvas) {Paint paint = new Paint();paint.setColor(Color.BLACK);paint.setStyle(Paint.Style.STROKE);Rect chartRec = new Rect(OFFSET_LEFT, OFFSET_TOP, CHARTW + OFFSET_LEFT,CHARTH + OFFSET_TOP);canvas.drawRect(chartRec, paint);Path textPath = new Path();// 选择一块区域,准备写文字“曲线图测试” paint.setStyle(Paint.Style.FILL);textPath.moveTo(200, 30);// 区域开始textPath.lineTo(400, 30);// 区域结束paint.setTextSize(20);paint.setAntiAlias(true);// 指定是否使用抗锯齿功能,会消耗较大资源,绘制图形速度会变慢。canvas.drawTextOnPath("曲线图测试", textPath, 0, 0, paint);// 左侧数值标记canvas.drawText("100", OFFSET_LEFT - TEXT_OFFSET - 15, OFFSET_TOP + 5,paint);for (int i = 9; i > 0; i--) {canvas.drawText("" + 10 * (10 - i), OFFSET_LEFT - TEXT_OFFSET - 15,OFFSET_TOP + CHARTH / 10 * i, paint);}canvas.drawText("0", OFFSET_LEFT - TEXT_OFFSET - 10, OFFSET_TOP+ CHARTH, paint);// 绘制虚线Path path = new Path();/*** PathEffect是用来控制绘制轮廓(线条)的方式。* DashPathEffect是PathEffect类的一个子类,可以使paint画出类似虚线的样子,并且可以任意指定虚实的排列方式.* 代码中的float数组,必须是偶数长度,且>=2,指定了多少长度的实线之后再画多少长度的空白.* 如本代码中,绘制长度2的实线,再绘制长度2的空白,再绘制长度2的实线,再绘制长度2的空白,依次重复.1是偏移量,*/PathEffect effects = new DashPathEffect(new float[] { 2, 2, 2, 2 }, 1);paint.setStyle(Paint.Style.STROKE);paint.setAntiAlias(false);paint.setPathEffect(effects);// 用于设置绘制路径时的路径效果,如点划线。for (int i = 1; i < 10; i++) {path.moveTo(OFFSET_LEFT, OFFSET_TOP + CHARTH / 10 * i);path.lineTo(OFFSET_LEFT + CHARTW, OFFSET_TOP + CHARTH / 10 * i);canvas.drawPath(path, paint);}}/*** 准备绘制点*/private void preparePoint() {//设置点的Y坐标为30-40int py = (CHARTH/10)*6+OFFSET_TOP + (int) Math.rint((Math.random() * (CHARTH/10)));Point p = new Point(OFFSET_LEFT + CHARTW, py);if (plist.size() > 21) {plist.remove(0);//控制点的个数//改变每一个点的X坐标for (int i = 0; i < 20; i++) {if (i == 0)plist.get(i).x -= (X_INTERVAL - 2);elseplist.get(i).x -= X_INTERVAL;}plist.add(p);} else {for (int i = 0; i < plist.size() - 1; i++) {plist.get(i).x -= X_INTERVAL;}plist.add(p);}}/*** 绘制点* * @param canvas*/private void drawPoint(Canvas canvas) {Paint paint = new Paint();paint.setColor(Color.BLACK);paint.setStrokeWidth(3);// 设置笔触的宽度if (plist.size() >= 2) {for (int i = 0; i < plist.size() - 1; i++) {canvas.drawPoint(plist.get(i).x, plist.get(i).y, paint);}}} }
【注:invalidate ()和postInvalidate()方法的选择:文档中已经写的很清楚了,如果要使用invalidate()必须要在UI主线程当中,如果不在UI主线程中,就要去调用postInValidate()】
如果大家有什么更好的方法或该文中有什么不足,希望大家指点。
Demo下载http://download.csdn.net/detail/af74776/7440807
转载于:https://www.cnblogs.com/scetopcsa/p/3765719.html
Android 绘制动态图相关推荐
- 超详细的Python matplotlib 绘制动态图
复习回顾 在matplotlib模块中我们前面学习绘制如折线.柱状.散点.直方图等静态图形.我们都知道在matplotlib模块主要有三层脚本层为用户提供快捷的绘制图形方法,美工层接收到脚本层的命令后 ...
- python绘制动态图-Python利用Echarts绘制动态交互图:快速入门
我们都知道,Echarts是百度开源的超强大的数据可视化工具.Python中经典的matplotlib.seaborn等库相比,它最大的优点是所绘制的图形为动态图,这意味着我们可以和图形之间进行动态的 ...
- android绘制矢量图_Android矢量可绘制
android绘制矢量图 In this tutorial, we'll be discussing Android Vector Drawable. Furthermore, we'll be im ...
- Excel绘制动态图三种方式
目录 一.项目背景 二.实现过程 一.项目背景 Excel是一款强大的数据分析统计工具,当数据量不太大或者需要快捷处理数据时, 我们经常要用到它,在面试时也会被经常问到一些函数功能和绘制图形等问题.本 ...
- MATLAB绘制主函数动态图,matlab绘制动态图
mathematica绘制动态图,"绘图之王"争霸赛--Excel才是绘图王道,matlab绘制动态图,动态三维图绘制 matlab动态图画法_数学_自然科学_专业资料.Matla ...
- android绘制矢量图_Android矢量可绘制对象
android绘制矢量图 Everything about Vector Assets in Android 关于Android中的矢量资产的一切 介绍 (Introduction) In the b ...
- Android绘制函数图象及正弦函数的介绍
零.前言 这篇是为了下一篇做点铺垫,也是来复习一些数学基础 本篇属于休闲娱乐,不要太较真,小科普一下,不喜勿喷 本文知识点前4点你可以随便看看,但第5点非常重要,本文源码见捷文规范 本文知识点: 1) ...
- 【数据处理】python使用matplotlib如何绘制动图;如何使用python进行动图gif制作;实时绘制动态图
一.现有的集成工具 绘制动图可以用一些现有的集成库,但是很麻烦,你需要调整和他们一样的参数和格式,定制化程度比较低,还得再去搞懂它们的东西.比如这些现有的: https://github.com/Ja ...
- 【Matplotlib】matplotlib.animation.FuncAnimation绘制动态图、交互式绘图汇总(附官方文档)
文章目录 零.文中用到的相关知识: 一.以sin举例,motplotlib绘制动图 1.绘制sin函数 2.动态画出sin函数曲线 3.点在曲线上运动 4.点,坐标运动 二.单摆例子 1.scipy中 ...
最新文章
- Ubuntu 14.04 64bit安装IPython
- STP 简介----生成树算法
- Matlab 2015a 中 pointCloud类相关知识
- Mybaitis JdbcType 和javaType
- makefile 的export问题
- SLF4J:Failed to load class org.slf4j.impl.StaticLoggerBinder
- java 搭建个人博客_Spring boot 搭建个人博客系统(一)——整体思路
- 让这三个月来的更猛烈些吧,前端react同构项目
- [转]VS清除打开项目时的TFS版本控制提示
- 终于有了MSDN上的Blog
- 基于鱼群算法的函数寻优
- PHP流量卡发货查单系统源码 流量卡物流发货运单号查询平台 一键安装版
- 固态硬盘的PCIE,SATA,M2,NVMe,AHCI
- 服务器xp系统无法粘贴到本地,电脑远程登录时本机和远程机间不能直接复制粘贴文件...
- icmp回复报文_如果目标主机阻塞了,ICMP回显请求报文,我们可以
- 单片机STC89C52RC实现矩阵键盘(汇编语言版)
- python期中考试试卷分析_期中考试考试试卷分析及反思
- 计算机应用基础考证,2017年计算机应用基础考试试题及答案
- HyperBDR云容灾深度解析三:适配上云下云跨云多场景
- %=% 引发的aspx文件、.aspx.cs文件和.aspx.designer.cs的一些说明
热门文章
- 逻辑回归模型_联邦学习体系下——逻辑回归模型
- mysql怎么返回上一行_月球上并没有发射基地,阿波罗飞船是怎么返回地球的?...
- lnp和mysql分开安装_毕业设计之LNP+DISCUZ +分离的数据库操作
- python 港股交易数据_GitHub - 116pythonZS/futuquant: 富途量化平台 API
- 电脑所有程序里有不一样颜色_12个好玩的电脑屏保,让你成为别人眼中最靓的仔。...
- 工程师必备:C/C 单元测试万能插桩工具
- 不懂指针类型,7个例子给你讲明白
- C 的16个大坑,你能躲过几个?
- python爬虫开发 从入门到实战_python网络爬虫从入门到实战开发
- python中函数的定义实例_Python基础之函数的定义与使用实例