2018-05-16—自定义控件之Paint,Canvas,Path使用

在我们之前做项目的时候,肯定是用到过很多控件的,那些都是系统或者别人设计出来的。看到那些炫酷美观的界面,你有没有想过设计一款属于自己的View控件呢?从今开始我们将学习一下如何设计自定义View。

首先自定义View分为三种类型:自定义View(继承View),自定义ViewGroup(继承ViewGroup)和,在原有的控件基础进行功能拓展(继承其他控件)。

我们先从自定义View开始看。今天我们主要说在里面一个比较重要的方法,onDraw方法:

onDraw

我们去看一下官方给他的注释,很简单的一句话

onDraw注释

解释一下,用这个画你的画。我们现在不需要了解太多,只要知道我们view长什么样子,是靠他完成的就行了。

关于这个方法,我们要使用三个很重要的对象:Canvas,Paint,和Path,我们绘制主要就是用这三个类完成的。


一、Paint类

Paint中文是油漆的意思,其实就是画笔的意思,我们来看一下Paint的主要方法:

paint类主要方法

我们通过上述一系列方法,更改我们画笔的属性,然后画出来不一样的效果。

有笔还得有纸,接下来我们看一下起到纸作用的类:Canvas类。


二、Canvas类

Canvas帆布的意思。他的方法就不全列举了,我们一边讲解,一遍使用。

在此之前,先说一下Canvas的坐标:

同我们平时数学书中见到的坐标系不一样,Canvas中的y正半轴向下。我们的画布就从原点开始向x、y轴扩散。

画线:

我们来说一下这几个参数,前两个是起始点的坐标,随后两个是结束点的坐标,最后一个是画笔对象,看到这几个参数大家应该就能看懂,我们设置起始点和结束点,然后在这两个点之间画一条线段,然后线段的粗细颜色都由我们自己通过paint来改变。

效果1

画一个矩形:

我们通过drawRect方法来实现画矩形,他有三个构造方法,前两个很像,只是第一个参数一个传入RectF对象,一个传入Rect对象,这两个对象都是创建一个矩形,只是一个参数是float类型,一个是int类型,所以前两个方法就不用多说了吧。

最后一个我们分别指定左、上、右、下四条边和x,y轴的偏移量。

这里大家能看懂吧。

画一个圆或椭圆:

有了上面的了解,大家应该知道这些参数的意义了吧。画圆这里我们不说了,我们看一下椭圆。

其实椭圆也能画成圆,这要看我们指定的矩形是长方形还是正方形。

这里不展示了。

画弧:

前几个参数不说了,看的都吐了。我们看一下后面几个参数:

startAngle:起始角度,0是水平最右边。

sweepAngle:顺时针划过的角度。

useCenter:起始和结束位置是否和圆心连接。

对应代码和效果如上所示。我画了一个半圆,起始位置为0,所以从右水平顺时针划过180度,然后规定连接圆心。

裁剪:

关于裁剪的方法实在是太多了,我们举两个例子就好。

这是官方给出的clipRect方法的介绍:让当前的裁剪和我们指定的矩形相交。

关于裁剪方法的官方文档说的话非常绕,我们这么理解:

我们从canvas上面裁下来一块图形,这个图形是我们自己选择的(Rect或者Path画出来),然后我们画的范围就只是在这个裁剪的矩形之内了。

过时的方法我们不说了(这几个过时的方法是真的恶心,就是因为最后那个参数-。+)。

我们可以看到从(0,0)点到(550,850)的一条线段只是显示了一部分,这一部分就是我们裁剪了之后的那个部分。

绘制文字:

我们还可以在canvas上绘制文字。

他有四个构造方法,我们看一下最简单的第二个-。+;

x:被绘制文本所在矩形的原点横坐标

y:被绘制文本所在矩形的原点纵坐标(基线坐标)

这张图表示的应该很清楚了吧,蓝色框是文本的相关矩形,左下角的黑色点是他的原点坐标。

这里我们要返回去看我们Paint中的一个方法:setTextAlign(enum);这个方法指定了我们的文本显示在原点左侧还是右侧,还是居中。

我们看到他是从100,500这个点往右显示的,所以我们如果不指定setTextAlign的话,他默认是LEFT。

我上面还有两个方法, save和restore。我们注意到了,上面我们已经指定了画布范围为裁剪之后的矩形,而现在居然又显示出来了。这就是save和restore方法的作用。

save方法让我们将当前的画布压入一个临时的栈中,而restore方法会让我们将从这个栈中取出栈顶的canvas。所以我们上得到了没有裁剪的canvas。

以上是根据官方文档和自己的理解综合的一段画,我们综合上面的例子来看一下:

首先一开始我们就调用save方法,在此之前我们除了drawLine方法没有进行过上面四种任意变换,所以没什么变化。我们把这个状态存入栈中。

然后我们就裁剪了一个矩形。在上面画线,因为现在已经只是显示当前这裁剪的矩形了,所以我们的线段只是显示了一个部分。

然后我们调用了restore方法,我们栈中唯一存储的状态取出来。这时候显示之前裁剪的效果已经消失,但是之前画的那一条线段还在。

最后我们写了一行字:屙屎那沙壁!!。。。。。

现在Canvas常用的方法已经说完了。我们在上面使用的时候间接地提到了Path这个类,那最后我们来看一下这个Path类:


Path类

path为路径的意思,其实这个类的效果和绘制差不多,只不过它并不是局限于上述几种图形,因为我们是一个一个点的移动,让他点动成线,从而形成图像。

就和我们走路走出来一个个脚印,然后连起来就是一个图像了。

其实path他的方法和canvas特别像,他也可以画上面说的那些图像(圆,弧,椭圆,矩形,线段)。只是他每个构造方法(除了lineTo和moveTo)最后都偶一个Direction参数,我们来说一下这个参数的作用:

Direction为一个枚举类型,他有两个量,CW表示顺时针CCW表示逆时针。

因为Path是点动成线图,所以我们是有顺序的,要制定顺时针还是逆时针。

最后说一下path的close方法。

我先把画笔移动到(100,600)这个点,然后先竖后横画了两条线。最后我们调用了close方法。

我们发现没画斜线啊他怎么连起来了,这就是我们close方法的作用:

这是close方法注解:关闭当前的轮廓,如果发现当前的点和起始点的点不在一个等高线,就添加从起始点到最后点。

说到这里大家应该明白为什么会有一条斜着的线段了。



好了,这是我们绘制过程中三个主要的类的基本用法。在这个上面坑时特别多的,笔者关于这些东西已经捣鼓了整整两天了。但是无论多么复杂的效果和代码,我们首先要知道他的基本效果和作用,那么在复杂的分析也不会乱啦。

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

推荐阅读更多精彩内容

  • 【Android 自定义View之绘图】 基础图形的绘制 一、Paint与Canvas 绘图需要两个工具,笔和纸。...
    Rtia阅读 11,667评论 5 34
  • 一、概述 1. 四线格与基线 小时候,我们在刚开始学习写字母时,用的本子是四线格的,我们必须把字母按照规则写在四线...
    addapp阅读 7,653评论 2 17
  • 版权声明:本文为博主原创文章,未经博主允许不得转载 前言 Canvas 本意是画布的意思,然而将它理解为绘制工具一...
    cc荣宣阅读 41,558评论 1 47
  • Paint reset()重置Paint。 setFlags(int flags)设置一些标志,比如抗锯齿,下划线...
    leach_chen阅读 1,437评论 1 35
  • 系列文章之 Android中自定义View(一)系列文章之 Android中自定义View(二)系列文章之 And...
    YoungerDev阅读 4,396评论 3 11