Android自定义控件前导基础知识学习(一)——Canvas

概述:

我们时常会遇到一些需要利用画图来实现的功能。例如一些常见的几何图形——点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形,总不能遇到 一个几何图形就用图片来代替吧。这样我们的手机肯定会吃不消。就算我们现在能够使用一些少量图片能够来解决当前的一些问题,可是对于那些“变化多端”的需求来说,这些手段根本不值一提。对此,我们可以利用Canvas画图技术来解决。下面就让我们一起来解开Canvas的神秘面纱吧。

示例编程:

1.绘制圆形

首先看一下效果图展示:

实现关键代码:

private void drawCirle(Canvas canvas) {
            canvas.drawCircle(500, 500, 200, paint);
        }

2.绘制弧线区域

效果图展示:

实现关键代码:

private void drawCuttingCirle(Canvas canvas) {

            RectF rect = new RectF(0, 0, 400, 400);

            canvas.drawArc(rect, // 弧线所使用的矩形区域大小
                    0, // 开始角度
                    90, // 扫过的角度
                    false, // 是否使用中心
                    paint);
        }

3.绘制1/4圆

效果图展示:

实现关键代码:

private void drawQuarterCirle(Canvas canvas) {
            RectF rect = new RectF(0, 0, 300, 300);

            canvas.drawArc(rect, // 弧线所使用的矩形区域大小
                    0, // 开始角度
                    90, // 扫过的角度
                    true, // 是否使用中心
                    paint);
        }

4.绘制直线

效果图展示:

实现关键代码:

private void drawLine(Canvas canvas) {
            canvas.drawLine(10, 10, 800, 1000, paint);
        }

5.绘制椭圆

效果图展示:

实现关键代码:

private void drawOval(Canvas canvas) {
            // 定义一个矩形区域
            RectF oval = new RectF(10, 5, 600, 900);
            // 矩形区域内切椭圆
            canvas.drawOval(oval, paint);
        }

6.绘制矩形

效果图展示:

实现关键代码:

private void drawRect(Canvas canvas) {
            RectF rect = new RectF(50, 50, 200, 200);

            canvas.drawRect(rect, paint);
        }

7.绘制圆角矩形

效果图展示:

实现关键代码:

private void drawSmoothRect(Canvas canvas) {
            RectF rect = new RectF(50, 50, 200, 200);

            canvas.drawRoundRect(rect, 30, // x轴的半径
                    30, // y轴的半径
                    paint);
        }

8.绘制多边形

效果图展示:

实现关键代码:

private void drawPolygon(Canvas canvas) {
            Path path = new Path(); // 定义一条路径
            path.moveTo(10, 10); // 移动到 坐标10,10
            path.lineTo(150, 1360);
            path.lineTo(960, 720);
            path.lineTo(500, 180);
            path.lineTo(10, 10);

            canvas.drawPath(path, paint);
        }

9.绘制罗盘

效果图展示:

实现关键代码:

private void drawCompass(Canvas canvas) {
            paint.setAntiAlias(true);
            paint.setStyle(Style.STROKE);
            canvas.translate(canvas.getWidth() / 2, 500); // 平移罗盘
            canvas.drawCircle(0, 0, 200, paint); // 画圆圈

            // 使用path绘制路径文字
            canvas.save();
            canvas.translate(-155, -155);
            Path path = new Path();
            path.addArc(new RectF(0, 0, 300, 300), -180, 180);
            Paint citePaint = new Paint(paint);
            citePaint.setTextSize(30);
            citePaint.setStrokeWidth(1);
            canvas.drawTextOnPath("http://blog.csdn.net/lemon_tree", path, 35, 0, citePaint);
            canvas.restore();

            Paint tmpPaint = new Paint(paint); // 小刻度画笔对象
            tmpPaint.setStrokeWidth(2);
            tmpPaint.setTextSize(30);

            float y = 200;
            int count = 60; // 总刻度数

            for (int i = 0; i < count; i++) {
                if (i % 5 == 0) {
                    canvas.drawLine(0f, y, 0, y + 20f, paint);
                    canvas.drawText(String.valueOf(i / 5 + 1), -4f, y + 55f, tmpPaint);
                } else {
                    canvas.drawLine(0f, y, 0f, y + 15f, tmpPaint);
                }
                canvas.rotate(360 / count, 0f, 0f); // 旋转画纸
            }

            // 绘制指针
            tmpPaint.setColor(Color.GRAY);
            tmpPaint.setStrokeWidth(4);
            canvas.drawCircle(0, 0, 20, tmpPaint);
            tmpPaint.setStyle(Style.FILL);
            tmpPaint.setColor(Color.YELLOW);

            canvas.drawCircle(0, 0, 5, tmpPaint);
            canvas.drawLine(0, 30, 0, -135, paint);
        }

以上的代码中,我不知道大家看上去会不会感觉有一点乱,不过没关系,在下一篇博客中我会对这一块单独拿出来说一下。我会以自定义一个动态时钟为例详细说明这部分的内容,大家稍安勿躁。

10.记录手指运动的路径

效果图展示:

实现关键代码:

这一部分的功能实现主要就是考虑三个部分:记录路径(这里单独拿一个变量来保存的原因是因为画图的时候会有一个重绘的过程,也就需要擦除后重绘,如果不保存以前的路径,这样就可能导致以前的路径不见了)、记录事件、绘制。

获得记录的路径:

private ArrayList<PointF> graphics = new ArrayList<PointF>();

触摸事件:

public boolean onTouchEvent(MotionEvent event) {

            graphics.add(new PointF(event.getX(), event.getY()));

            invalidate(); // 重新绘制区域

            return true;
        }

绘制:

private void drawFingerPath(Canvas canvas) {
            for (PointF point : graphics) {
                canvas.drawPoint(point.x, point.y, paint);
            }
        }

源码下载:

(注:源码中除了Canvas使用集合的示范外还有画曲线、正/余弦函数、SurfaceView的使用、心跳。PS:心跳示例需要点击屏幕才能触发)

http://download.csdn.net/detail/u013761665/8423823

时间: 2024-07-30 06:29:53

Android自定义控件前导基础知识学习(一)——Canvas的相关文章

计算机基础知识学习

第一周学习 一.知识方面,总得来说,就是学习计算机基础知识. 1.从计算机的发展,应用,组成,网络等方面了解: 2.对计算机操作系统的学习:常用的操作系统,操作系统的功能.分类: 3.办公软件的学习:Word\Excel\ppt,像Word中编号格式.自动生成目录,Excel中条件格式的应用,图表插入,以及各种基础函数的使用: =SUM(Eoo*$E$3,Foo*$F$3,Goo*$G$3)  表示:用E\F\G列的各数与E3\F3\G3相乘后求和,count(if)\a 计数函数, =COUN

ARM基础知识学习笔记

/*****************数电知识*******************/ PN结(Positive-Negative) 三极管:BJT(双极结型三极管Bipolar Junction Transistor)               FET(场效应管Field Effect Transistor)          (单极结型) 1.MOSFET (金属氧化物半导体Metal Oxide Semiconductor FET)               2.JFET(结型Junct

C++基础知识学习笔记

基本语法 C面向过程思想:程序=(数据结构)+(算法) 数据结构与算法分离,以算法(函数)为主. C++面向对象思想:程序=(数据结构+算法) 数据结构(属性)与算法(操作)绑成一个类,定义一个个对象对象=(数据结构+算法)  ,程序=(对象+对象+对象+--) 面向对象程序设计的程序员有两类:1.面向对象应用程序设计2.类库的设计 头文件:类的声明            ---类的外部接口       (成员函数在类声明中实现时,一般很简短,默认为内联函数)源文件:类的成员函数定义     -

linux基础知识学习-linux架构

硬盘分区: 第一扇区(512bytes): MSR:master boot record (446bytes)主引导分区 partion table:(64bytes)分区表,四个.可以是主分区(primary)或者扩展分区(Extended), 每个表指向磁盘某段区间.最多只有一个扩展分区,扩展分区里面可以扩展多个逻辑分区.其余扇区(柱面(cylinder)):实际存储的地方 linux 中(\etc/fstab):IDE  总线形式不同 (a~d)/dev/hda SATA,SCSI,USB

Bash编程基础知识学习第一节

Bash编程基础知识学习 一.bash的由来 1 .什么是Bash 什么是Shell Bash 是GNU Bourne-Again SHell,是目前大多数Linux发行版采用的Shell. Shell 是*nix提供给用户使用的界面.一个操作系统的底层是独立运行的, 用户界面和底层分开,可以最大限度的保证系统稳定.Shell就是一个特殊的程序,负责接受用户的命令,并把系统的响应返回给用户. Bash Shell 一般不需要自己安装,在安装发行版的同时都会安装好. Shell的存在是和登陆相关的

(转)Linux基础知识学习

Linux基础知识学习 原文:http://blog.csdn.net/ye_wei_yang/article/details/52777499 一.Linux的磁盘分区及目录 Linux的配置是通过修改配置文件来完成. 1.1.Linux磁盘分区 Linux可以将磁盘分为多个分区,每个分区可以被当做一个独立的磁盘使用,磁盘类型:主分区.扩展分区.逻辑分区. 主分区标记为活动,用于操作系统的引导,一块磁盘最多划分4个主分区,主分区存放操作系统的文件或用户数据. 扩展分区:主分区小于4个时才可以划

PHP基础知识学习总结

从今天开始过一遍PHP的基础知识   加油  地址:http://www.runoob.com/php/php-operators.html   该看:PHP运算符 2017年5月23日23:38:30 笔记: PHP基础知识2017年5月23日23:38:411.PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言.2.PHP 是服务器端脚本语言.3.PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言.PHP

〖前端开发〗HTML/CSS基础知识学习笔记

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

web前端基础知识学习网站推介

内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.