自定义View(一) 绘制基础

记录下自己学习自定义View的过程。共勉

首先,在我们创建的自定义View中 重写onDraw()方法。如下

@Overrideprotected void onDraw(Canvas canvas){

    super.onDraw(canvas);

}

我们知道,自定义View需要画笔和画布。在onDraw()方法中,参数canves就是我们所需要的画布,对于画笔,我们需要自己创建一下

Paint paint = new Paint();

这两样东西都创建好了之后,就可以开始绘制了。

一、Canves.drawXXX

我们先来看一下Canves的一些常用方法

Canvas.drawColor(@ColorInt int color) 颜色填充

这是最基本的方法,例如 drawColor(Color.BLACK) 会把整个区域染成纯黑色,覆盖掉原有内容;

drawColor(Color.parse("#FF0000") 会把整个区域染成红色

当然也有其他颜色方法,如drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b)方法。

drawCircle(float centerX, float centerY, float radius, Paint paint) 画圆

画圆方法有四个参数。前两个参数代表了圆的圆心坐标,radius代表半径,paint代表我们的画笔工具。

canvas.drawCircle(300,300,200, paint);

上述代码即为画一个圆心在(300,300)位置,半径为200的圆形。

在这里我们需要注意,Android的坐标系和我们在数学上学的坐标系有区别。如下图所示


Android坐标系


绘制圆形

drawRect(float left, float top, float right, float bottom, Paint paint) 画矩形

对于上面这个方法,前面四个参数是矩形四条边的坐标。

canvas.drawRect(100, 100, 500, 500, paint);

除此之外,还有以下重载方法


我们可以创建Rect对象或者RectF对象,来完成此方法。

那么有人可能会问,这两个东西有啥区别啊?其实,这两个都可以描述矩形,只是他们的参数的单位不同。

Rect参数的单位是int,而RectF参数的单位则是float。因此RectF的精度会比Rect准确那么一丢丢。

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 画圆角矩形

四个参数left, top, right, bottom 是四条边的坐标,rx 和 ry 是圆角的横向半径和纵向半径

canvas.drawRoundRect(100, 100, 500, 300, 50, 50, paint);

就是长这样的


圆角矩形

drawPoint(float x, float y, Paint paint) 画点

x 和 y 是点的坐标。

canvas.drawPoint(50, 50, paint);

drawOval(float left, float top, float right, float bottom, Paint paint) 画椭圆

四个参数left, top, right, bottom 是这个椭圆的左、上、右、下四个边界点的坐标。

canvas.drawOval(50, 50, 700, 200, paint);

另外,它还有一个重载方法 drawOval(RectF rect, Paint paint),你可以直接填写 RectF 来绘制椭圆。

drawLine(float startX, float startY, float stopX, float stopY, Paint paint) 画线

startX, startY, stopX, stopY 分别是线的起点和终点坐标。

canvas.drawLine(200, 200, 800, 500, paint);

drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 绘制弧形或扇形

drawArc() 是使用一个椭圆来描述弧形的。left, top, right, bottom 描述的是这个弧形所在的椭圆。startAngle是弧形的起始角度,就是我们上面坐标系中的x轴正方向,是0度。顺时针绘制为正角度,逆时针则是负角度。sweepAngle是矩形划过的角度。useCenter代表是否连接到圆心,他也就代表的你要绘制的图形是扇形还是一个弧形。如果连接到圆心,那么就是扇形,反之则是一个弧形。

canvas.drawArc(100, 100, 700, 500, -135, 135, true, paint);    //绘制扇形

paint.setStyle(Paint.Style.STROKE);

canvas.drawArc(100, 100, 700, 500, 90, 135, false, paint);       //绘制弧形


绘制扇形

drawBitmap(Bitmap bitmap, float left, float top, Paint paint) 画 Bitmap





以上就是Canves绘制基本图形的一些方法。接下来我们了解一下Paint画笔的方法。

二、Paint

paint.setColor(int color)

这个方法是给画笔设置颜色,比如你想画一个带颜色的圆,你需要这么做

paint.setColor(Color.RED); // 设置为红色

canvas.drawCircle(300, 300, 200, paint);

这样你画出来的圆就是一个红色的了。

 paint.setStyle(Paint.Style style)

这个方法是设置画笔的style。这个Style是个枚举,里面包含FILL,STROKE,FILL_AND_STROKE三种类型。

STROKE代表画线,你看个图就懂了。

paint.setStyle(Paint.Style.STROKE);

canvas.drawCircle(300, 300, 200, paint);


stroke

paint.setStrokeWidth(float width)

如果你设置style为STROKE 和 FILL_AND_STROKE,则可以使用此方法。意思为设置线的宽度。

paint.setAntiAlias()

此方法意为开启抗锯齿。当然,你也可以使用这种方式来开启抗锯齿。在初始化画笔的时候使用。

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

了解了canves基本图形的画法和paint的一些常用方法,我们来了解一下drawPath()方法

三、canves.drawPath()

addCircle(float x, float y, float radius, Direction dir) 添加圆

x,y,radius是圆的基本参数,最后一个参数dir代表画圆的路径的方向。

方向分为两种,一种是CW,即顺时针,另外一种是CCW,逆时针。平时我们画圆,使用哪种都可以。但是涉及到图形相交的时候,我们需要考虑下使用哪种方向。

path.addCircle(300, 300, 200, Path.Direction.CW);

canvas.drawPath(path, paint);

你会发现,这样画出的效果和我们刚才使用canves,drawCircle()方法绘制出的效果是一样的。所以说如果只是想画一个圆,使用drawCircle()方法更方便。

其他一些方法,比如addRect(),addOval(),addOval()效果都一样的。

lineTo(float x, float y) 

rLineTo(float x, float y) 画直线

这是一个画直线的方法,x,y是目标位置的坐标。初始坐标为(0,0)

lineTo(x,y)的参数是绝对坐标,rLineto则是相对坐标,就是相对于上次移动之后的那个点的坐标。看下图就明白了。、

path.lineTo(300, 300); // 由当前位置 (0, 0) 向 (300, 300) 画一条直线

path.lineTo(300, 0); // 由当前位置 (300, 300) 向正右方 300 像素的位置画一条直线


lineTo
rLineTo

moveTo(float x, float y)  移动到目标位置

path.moveTo(200,100);       //  将坐标位置移动到(200,100)

arcTo(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean forceMoveTo) 画弧形

这个方法和 drawArc() 比起来,少了一个参数 useCenter,说明这个方法只画弧形,不画扇形;而多了一个参数 forceMoveTo的意思是 绘制是要「抬一下笔移动过去」,还是「直接拖着笔过去」,区别在于是否留下移动的痕迹。froceMoveTo为true代表强制移动过去,也就是没有痕迹,反之则有痕迹。还是看图


forceMoveTo 为true


 forceMoveTo 为false

addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle)

这个方法也是画弧形的方法。 只不过这个方法没有forceMoveTo,在内部设置了forceMoveTo = true。是arcTo的简化版。

close() 封闭当前子图形

它的作用是把当前的子图形封闭,即由当前位置向当前子图形的起点绘制一条直线。因此,close() 和 lineTo(起点坐标) 是完全等价的。









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

推荐阅读更多精彩内容

  • HenCoder 原文 关键点 自定义绘制方法的重写,其中最常用的是onDraw 绘制的关键是Canvas的使用C...
    李小神不偷懒阅读 469评论 4 1
  • 自定义绘制概述 方法:重写绘制方法(最常用:onDraw()) 绘制的关键:CanvasCanvas的绘制类方法:...
    NewSalton阅读 416评论 0 0
  • 系列文章之 Android中自定义View(一)系列文章之 Android中自定义View(二)系列文章之 And...
    YoungerDev阅读 4,305评论 3 11
  • 文/倾慕如歌 人面桃花相映红,片片芳菲落离殇。 锲子 他是花神之后,她是宫中公主。一次邂逅,不知是乱了谁的心扉,误...
    summer凉末阅读 407评论 2 4
  • 很多家长为了节省时间,或者为了在孩子面前表示自己懂得很多,往往喜欢就孩子提出的问题马上而直接地给出答案(或者是家长...
    第6通道阅读 240评论 0 0