Canvas&Paint 知识梳理(1) - Canvas 基础

一、概述

经过前面对绘制原理的学习,我们知道当ViewonDraw(Canvas canvas)方法被调用时,会传入一个canvas,我们通过这个canvas进行绘制,即可得到对应的图像。
我们主要了解以下几个方面:

  • Canvas的含义
  • 如何获得Canvas
  • Canvas的变换
  • Canvas的绘图
  • 恢复和保存

二、Canvas的含义

涉及到Canvas的主要有以下三个概念:画板、画布和图层,画板包含了多个画布,每个画布中间又可能会包含多个图层,同一层级的元素会叠加在一块,在上一层中间进行展示。

  • 画板
    画板用来承载画布。
  • 画布
    每一个画布就是一个bitmap,所有的图像都是画在bitmap上的。
    画布有两种:
  • View的原始画布,也就是onDraw(Canvas canvas)当中传入的canvas实例。
  • 人造画布,即通过saveLayer或者new Canvas(Bitmap)这些方法来人为新建一个画布,saveLayer新建一个画布之后,以后所有的draw函数所画的图像都是在这个画布上的,只有在restore、restoreToCount函数以后,才会返回到原始画布上绘制。
  • 图层
    图层是绘制的最小单元,每次调用canvas.drawXXX函数,都会生成一个专门的透明图层来画这个图形,画完之后,就盖在了画布上。连续调用draw方法,那么就会生成多个透明图层,画完之后依次在当前的画布上显示。

三、获得Canvas

3.1 重写View中的函数 onDraw(Canvas canvas) dispatchDraw(Canvas canvas)

ViewGroup中,当它有背景的时候调用onDraw方法,否则会跳过onDraw直接调用dispatchDraw方法,在View中,两个都会调用的。

3.2 通过Bitmap创建

Canvas c = new Canvas(bitmap);
//或者
Canvas c = new Canvas();
c.setBitmap(bitmap);

如果我们通过这个方法构造了一个canvas,那么这个canvas上绘制的图像会保存在这个bitmap上,而不是在View上,如果想画在View上,就必须通过onDraw函数传进来的canvas画一遍。

3.3 SurfaceHolder.lockCanvas()

四、Canvas变换

关于Canvas的变换可以分为两类:可逆变换和不可逆变换。
其中可逆变换包括:平移、旋转、缩放和倾斜四种。
不可逆变换包括:裁剪。

4.1 可逆变换

4.1.1 平移

void translate(float dx, dy),向右和向下为正方向,此时移动的是canvas原点的位置。

4.1.2 旋转

rotate(float degrees, float px, float py),正数表示顺时针旋转,此外还可以指定旋转的中心,默认是(0, 0)

4.1.3 缩放

scale(float sx, float sy, float px, py),对xy进行缩放,并且可以指定缩放的中心点。

4.1.4 倾斜

skew(float sx, float sy),倾斜画布,分别表示倾斜角度的tan值。

4.2 不可逆变换

调用clipXXX函数进行裁剪,通过与Rect、Path、Region取交、并、差等集合运算来获得最新的画布状态,这个操作是不可逆的,一旦canvas被裁剪,那么就不能被恢复。

五、Canvas绘制

5.1 绘制基本图形

线

drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
drawLines(float[] pts, Paint paint)
drawLines(float[] pts, int offset, int count, Paint paint)

drawPoint(float x, float y, Paint paint)
drawPoints(float[] pts, Paint paint)
drawPoints(float[] pts, int offset, int count, Paint paint)

矩形

drawRect(float left, float top, float right, float bottom, Paint)
drawRect(RectF rect, Paint paint)
drawRect(Rect rect, Paint paint)

圆角矩形

drawRoundRect(RectF rect, float rx, float ry, Paint paint)

drawCircle(float cx, float cy, float radius, Paint paint)

椭圆

drawOval(RectF oval, Paint paint)

扇形

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

5.2 调用Path绘制

canvas中,绘制路径时使用drawPath(Path path, Paint paint)方法

直线路径

调用moveTo(float x, float y)可以移动到某个绘制点,lineTo(float x, float y)连到直线的结束点,如果连续画了几条直线,但没有形成闭环,调用close()会将路径首尾连接起来。

矩形路径

addRect(RectF rect, Path.Direction dir)drawRect(float l, float t, float r, float b, Path.Direction dir),用来绘制一条封闭的矩形路径,第2个参数决定了该路径的方向。

圆角矩形路径

addRoundRect(RectF rect, float[] radii, Path.Direction dir)addRoundRect(RectF, float rx, float ry, Path.Direction dir)

圆形路径

addCircle(float x, float y, float radius, Path.Direction dir)

椭圆路径

addOval(RectF oval, Path.Direction dir)

弧形路径

addArc(RectF oval, float startAngle, float sweepAngle)

5.3 绘制文字

canvas的文字绘制提供以下3种:

普通水平绘制

drawText(String text, float x, float y, Paint paint)

指定各个文字位置

drawPosText(String text, float[] pos, Paint)

沿路径绘制

drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint),其中hOffset表示与路径起始点的水平偏移量,vOffset表示与路径中心的水平偏移量。

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

推荐阅读更多精彩内容