从0到1Android自定义View(三)画图的五个元素组件

Android.jpg

前言

迟来的第三篇,这篇还是知识点,不过没有细讲每个方法的运用等等,因为我个人觉得,API 方法是变的,且死记硬背效果不佳,当然能记住是好事,我们必需学会在编程中猜想和查找到对应的方法,所以这里提供的只是一些方法的概况,下一篇就是进行实践来完善这些知识点。

目录

从0到1Android自定义View(三) 画图的五个元素组件.png

一、画图五个元素组件简介

Android Framework 提供了一些 2D 画图的 API,android.graphics 包就是其中之一。

通常我们在自定义 View 中需要画一些东西,那么基本就是需要 5 个元素组件协同来完成的。这 5 个组件分别是:

  • 颜色:Color

  • 位图:Bitmap 来保持(hold)那些像素,通过 Matrix 来使图像变换,如平移、旋转、缩放、扭曲等

  • 画布:Canvas 来响应画画(draw)的调用(并将其写入 bitmap)

  • 画笔:Paint 描述画画的颜色和样式等

  • 路径:Path 根据路径绘制文本和剪裁画布

其实这也很好理解,编程其实就是根据生活哲学创造的。比如 JAVA 的编程思想就是:万事万物皆对象。在现实生活中,我们需要画一些东西,也是需要画纸,画笔,颜料等等,因此自定义 View 中,我们需要画一些东西,也是离不开画布(Canvas),画笔(paint),其中我们可以调整画布的颜色和画笔的颜色。

下面我们一个一个类的看下相关的知识点,虽然会有点闷,可是感觉这又是必需的,过完这些知识点后,就开始一些实战的运用了。

二、颜色:Color 类

Color 我们应该是接触的比较多的,因此只是简单的介绍一下使用方式。Android 系统中颜色的常用表示方法有以下 3 种:

1、int color = Color.BLUE;

2、int color = Color.argb(150,200,0,100);

3、在xml文件中定义颜色;

三、位图:Bitmap 类

1、Bitmap 类在自定义 View 中的简介

Bitmap (android.graphics.Bitmap),是 Android 系统中的图像处理的最重要类之一。用它可以获取图像文件信息,进行图像剪切、旋转、缩放等操作,并可以指定格式保存图像文件。

当然,在自定义 View 中使用最多的操作大概就是一些剪切,旋转等动画功能了。因为 Bitmap 涉及的方面挺广的,因为这是自定义 View 系列,主要是介绍如何通过 Matrix 在 Android 中的使图像( Bitmap )变换,如平移、旋转、缩放、扭曲等。

2、Matrix 简介

Matrix 内部通过维护一个 float[9] 的数组来构成 3x3 矩阵的形式,而实际上所有的变换方法说到底就是通过更改数组中某个或某几个位置的数值。Matrix 提供了 setValues() 和 getValues() 方法来操作数组。

Matrix 矩阵格式.png

实际上我们平常利用 Matrix 来进行 Translate(平移)、Scale(缩放)、Rotate(旋转)的操作,就是在操作着这个矩阵中元素的数值来达到我们想要的效果。但是现在问题来了,上面提到的平移、缩放、旋转操作中,旋转和缩放可以用乘法表示,而平移就只能用加法表示,而且 Matrix 是一个 3 X 3 的矩阵,实际上表示这些操作 2 X 2 的矩阵足矣!

Matrix的平移、缩放、旋转的矩阵.png

如上,可以依次看到平移、缩放、旋转的矩阵,其中

  • (x',y')表示执行操作后的点的坐标

  • (x,y)表示执行操作前的点的坐标

  • tx、ty 分别表示 x 轴、y 轴上平移的距离

  • Sx、Sy 分别表示x轴、y轴上的缩放比例

  • θ 则表示旋转角度

其实在计算机图形应用涉及到几何变换,主要包括平移、旋转、缩放。以矩阵表达式来计算这些变换时,平移是矩阵相加,旋转和缩放则是矩阵相乘。不过,通过齐次坐标(齐次坐标有着广泛的应用,包括电脑图形及 3D 电脑视觉。使用齐次坐标可让电脑进行仿射变换,并通常,其投影变换能简单地使用矩阵来表示。),将平移的加法合并用乘法表示。

3、Matrix 9 个元素的作用

上面都提到了 Matrix 是一个 3 X 3 的矩阵,也就是说一个 Matrix 共有 9 个元素,那么它每个元素的值发生改变会起到什么作用呢?

Matrix 基本变换有 4 种: 平移(translate)、缩放(scale)、旋转(rotate) 和 错切(skew)。这 4 种变换都是由矩阵中的 9 个元素参数控制的

Matrix 9 个元素的作用.png

上面提到了平移(translate)、缩放(scale)、旋转(rotate) 和 错切(skew) 都是由这 9 个元素控制的,当然,Android 给我们提供了一系列的方法函数,且这些变换操作,每一种操作在 Matrix 均有三类,前乘(pre),后乘(post)和设置(set)

常用API包括下面的组合形式

set pre post
translate setTranslate preTranslate postTranslate
scale setScale preScale postScale
rotate setRotate preRotate postRotate

我们用translate来讲

setTranslate() 指定了移动的位置,不需要通过左乘右乘

postTranslate() 在方法内部进行的是 M' = T(dx, dy) * M,t 左乘m

preTranslate() 在方法内部进行的是 M' = M * T(dx, dy),m左乘t

post,pre的乘法计算顺序是相反的,矩阵乘法不满足交换律,所以计算结果几乎是不同的。

可能不太好理解,不过先要知道有这回事,之后通过实践就能很好的理解了。当然,Matrix 提供的 API 方法还有很多,罗列出来给各位看,效果也不是很好,主要是 API 方法是会变的,因此我们最重要的技能还是学会在编程中看 API 方法,查看源码或者源码中的解释介绍来看和了解相关方法的作用。

四、画布: Canvas 类

1、Canvas 类简介

Canvas,画布,能够在上面绘制各种东西,是安卓平台 2D 图形绘制的基础。因为 Canvas 类是构成上层的基础,所以它的可操作性强,里面提供的方法也是相对基础的,因此想弄成复杂一点的图像是有一定的难度的。

2、Canvas 类提供的 API

其实我的看法跟上面一样,不全列出来 Canvas 类提供的 API 方法,因为太多了,列出来,相信各位也不会细看,太多的话,更不容易让各位了解记忆。所以大概总结一下, 用到可以打关键字,就能在 AS 或者 Eclpise 中查到相关的方法了。

Canvas 提供的绘制图形的方法,基本都是以 draw 开头的。好,我们只要知道这个,我们只要打出关键字就可以知道相关的方法了,例如:

Canvas draw方法.png

从上面方法的名字看来我们可以知道 Canvas 可以绘制的对象有:弧线(arcs)、填充颜色(argb 和color)、 Bitmap、圆(circle 和 oval)、点(point)、线(line)、矩形(Rect)、图片(Picture)、圆角矩形 (RoundRect)、文本(text)、顶点(Vertices)、路径(path)。

我个人是比较不提倡死记硬背有哪些 API 方法的,通过思考,猜想 Google 的工程师可能会提供什么方法出来,比如,上面的,Canvas 类提供了可以绘制的对象,可是只有这些,还是不够的,为什么?因为我们看到的自定义 View 都是附带一些动画的,比如选择等等,所以我们可以知道,Android 会提供了一些对 Canvas 位置转换的方法:rorate、scale、translate、skew(扭曲)等。而且它允许你通过获得它的转换矩阵对象,也就是上面所介绍的。这些操作就像是虽然你的笔还是原来的地方画,但是画纸旋转或者移动了,所以你画的东西的方位就产生变化。为了方便一些转换操作,Canvas 还提供了保存和回滚属性的方法( save 和 restore ),比如你可以先保存目前画纸的位置(save),然后旋转 90 度,向下移动 100 像素后画一些图形,画完后调用 restore 方法返回到刚才保存的位置。

五、画笔: Paint 类

1、Paint 类简介

Paint 类包含有用来画几何图形、文本、位图的类型和颜色等信息,如果把 Canvas 类看作是画板,那我们可以把 Paint类 看做是画笔,可以根据需要画出不同颜色和样式的图形、文本等内容。其实基本 Paint 类和 Canvas 类都是结合使用的。

2、Paint 类提供的 API

Paint 类提供了很多方法来设置和获取 Paint 对象的属性,像上面提到的观点一样,猜下会提供什么 API 方法,竟然是画笔,我们现实中有不同的颜色的画笔,所以 API 提供了的很多方法来设置和获取Paint 对象的属性,像刚提到的颜色值(setColor),Alpha 值(setAlpha),字体尺寸(setTextSize)和画笔风格,空心或者实心(setStyle)等等。当然有 set 方法肯定也会有对应的 get 方法。

六、路径:Path 类

1、Path 类简介

Path 类的官方定义:路径,即无数个点连起来的线。其实也就是说 Path 类封装了由直线和曲线构成的几何路径。

2、Path 类作用

上面提到的绘制都是简单图形(如 矩形 圆 圆弧等),而对于那些复杂一点的图形则没法去绘制(如绘制一个心形 正多边形 五角星等),而使用 Path 不仅能够绘制简单图形,也可以绘制这些比较复杂的图形。另外,根据路径绘制文本和剪裁画布都会用到 Path。

3、Path 类提供的 API

Path 类相对来说,提供的方法不是三言两语就能说明白的,需要通过实践来体会,这里只是简单的提下,还是要通过往后实践来加深理解的。

Path 类,上面提到可以绘制复杂的图形,因此会有基本绘图方法。比如绘制圆形(addCircle),绘制直线(lineTo)和绘制圆角矩形(addRoundRect)。这时我们就会想到,不是绘制复杂的图形吗,这些都是基本的图形啊。那么怎么绘制复杂的图形呢,当然复杂的图形都是有基本的图形演变来的,那么 Path 提供了什么特别的 API 吗?所以 Path 提供了 lineTo,moveTo,quadTo,cubicTo 以及与之对应的 rLineTo ,rMoveTo ,rQuadTo,rCubicTo的方法。比如 lineTo(float x, float y),绘制一条 x 到 y 的直线,因为两点决定一条直线,所以提供两个点就行了。而 rLineTo 呢?rLineTo 方法是基于当前绘制开始点的offest。比如当前 paint 位于 (100,100) 处, rLineTo(100,100) 方法绘制出来的直线是从 (100,100) 到 (200,200) 的。也就是 rXXX 方法方便用来基于之前的绘制作连续绘制。

当然 Path 类还有一些其他的方法,比如移动画笔到 (x,y) 处:moveTo(float x,float y),设置当前 path 的终点: setLastPoint(float x,float y) 等等一些列的方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容