四、Android绘制知识总结(画布篇)

Canvas(画布),绘制的载体,可以通过Paint(画笔)在上面绘制所有你想绘制的图案。

1、Canvas绘制API

其包含一系列drawXXX方法:
1、绘制颜色
public void drawColor(int color)
public void drawARGB(int a, int r, int g, int b)
public void drawRGB(int r, int g, int b)

2、绘制形状

  • 绘制点
    void drawPoint(float x, float y, Paint paint)
    void drawPoints(float[] pts, Paint paint)
    void drawPoints(float[] pts, int offset, int count, Paint paint)

  • 绘制线段
    void drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
    void drawLines(float[] pts, int offset, int count, Paint paint)
    void drawLines(float[] pts, Paint paint)

  • 绘制矩形
    void drawRect(RectF rect, Paint paint)
    void drawRect(Rect r, Paint paint)
    void drawRect(float left, float top, float right, float bottom, Paint paint)

  • 绘制圆角矩形,与shape标签不同的是,它不能单独设置4个圆角
    void drawRoundRect(RectF rect, float rx, float ry, Paint paint)
    void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)

  • 绘制双框圆角矩形

void drawDoubleRoundRect( RectF outer, float outerRx, float outerRy, RectF inner, float innerRx, float innerRy, Paint paint)

/**
  * 这个方法通过内外边框来完成绘制,且内外边框的四个角的圆角半径都可控
  * @param outer 外边框的范围
  * @param inner 内边框的范围
  * @param innerRadii、outerRadii 
  * 这两个float数组分别保存了内外边框的四个角的圆角半径
  * 每个数组需要传入8个float,每两个为一组 rx,ry即圆角半径在x,y方向的值
  * @param paint 这里我传入的paint里面保存着bitmapShader
  * 此外需要注意设置Style:
  * FILL将会绘制到两个矩形(RectF)中间的内容
  * STROKE,就是会把两个边框给绘制出来。
  */
void drawDoubleRoundRect(RectF outer, float[] outerRadii, RectF inner, float[] innerRadii, Paint paint)
  • 绘制圆
    void drawCircle(float cx, float cy, float radius, Paint paint)

  • 绘制椭圆
    void drawOval(RectF oval, Paint paint)
    void drawOval(float left, float top, float right, float bottom, Paint paint)

  • 绘制弧
    void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
    void drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

  • 绘制路径
    void drawPath(Path path, Paint paint)

3、绘制图像
void drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
void drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
void drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)

void drawPicture(Picture picture)
void drawPicture(Picture picture, RectF dst)

android.graphics.Picture相对于Drawable和Bitmap来说,更加小巧,它并不存储实际的像素,仅仅记录了每个绘制的过程。使用介绍

4、绘制文字

  • 绘制常规文字
void drawText(char[] text, int index, int count, float x, float y, Paint paint)`
void drawText(String text, float x, float y, Paint paint)
void drawText(String text, int start, int end, float x, float y, Paint paint) 
void drawText(CharSequence text, int start, int end, float x, float y, Paint paint)

注意:这里x和y坐标分别表示文字起始位置和文字基线位置坐标。

  • 沿路径绘制文字
void drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)
void drawTextOnPath(String text, @NonNull Path path, float hOffset, float vOffset, Paint paint)

float hOffset:与路径起始点的水平偏移量
float vOffset:与路径起始点的垂直偏移量


image.png
  • drawTextRun
    对汉字没用,可以不用了解
void drawTextRun(char[] text, int index, int count, int contextIndex, int contextCount, float x, float y, boolean isRtl, Paint paint)
void drawTextRun(CharSequence text, int start, int end, int contextStart, int contextEnd, float x, float y, boolean isRtl, Paint paint)
void drawTextRun(MeasuredText text, int start, int end, int contextStart, int contextEnd, float x, float y, boolean isRtl, Paint paint)
  • 其余:
    public void drawPaint(Paint paint)

绘制3D图形利器

void drawVertices(@NonNull VertexMode mode, int vertexCount, @NonNull float[] verts,
            int vertOffset, @Nullable float[] texs, int texOffset, @Nullable int[] colors,
            int colorOffset, @Nullable short[] indices, int indexOffset, int indexCount,
            @NonNull Paint paint)

2、Canvas变换操作

1、每次调用drawXXX系列函数来绘图时,都会产生一个全新的Canvas透明图层。
2、如果在调用drawXXX系列函数前,调用平移、旋转等函数对Canvas进行了操作,那么这个操作是不可逆的。每次产生的画布的状态都是执行这些操作后的状态。
3、在Canvas图层与屏幕合成时,超出屏幕范围的图像是不会显示出来的。

Canvas变换只会影响后续绘制内容。

  • 1、平移操作
    void translate(float dx, float dy)

  • 2、缩放操作
    void sacle(float sx, float sy)
    相当于先translate(dx, dy),再sacle(sx, sy),再反向translate(-dx, -dy)
    void sacle(float sx, float sy, float dx, float dy)

  • 3、旋转操作
    void rotate(float degress)
    void rotate(float degress, float px, float py)

  • 4、倾斜操作
    void skew(float sx, float sy)

  • 5、Matrix,通过矩阵等操作Canvas
    void setMatrix(Matrix matrix)

3、Canvas裁剪

切割操作,只能绘制图像到指定区域内
void clipXXX(...)
反切割操作,只能绘制图像到指定区域外
void clipOutXXX(...)

注意:clip系列函数需要禁用硬件加速功能
setLayerType (LAYER_TYPE_SOFTWARE,null) ;

4、状态恢复与保存

当Canvas经过变换操作或裁剪操作后,后续操作都是基于变换后的Canvas,都将受到影响。所以Canvas提供saverestorerestoreToCount方法来保存和恢复状态。

  • 1、save
    int save()
    会保存当前Canvas的MatrixClip等信息到Canvas的私有栈中。
    返回当前栈的位置,可作为Canvas.restoreToCount()的入参,用于快速恢复到当前状态。

  • 2、restore
    void restore()
    Canvas的私有栈中恢复MatrixClip等信息。

  • 3、restoreToCount
    void restoreToCount(int saveCount)
    restore()类似,但restore()只能依次从私有栈中弹出,而restoreToCount(),可以弹出到私有栈中特定的位置。

示例代码如下:

canvas.drawRect(100, 100, 300, 300, paint);  
int count = canvas.save();  
canvas.rotate(45, 200, 200);  
paint.setColor(Color.GRAY);  
canvas.drawRect(100, 100, 300, 300, paint);  
canvas.restoreToCount(count);  
canvas.drawLine(200, 100, 200, 300, paint);

5、离屏渲染

离屏渲染,意思是把内容绘制到单独的缓冲画布中,从而保证绘制的内容不受旧画布的影响。一般配合Xfermode使用,同时需要禁止硬件加速。

Android通过了saveLayersaveLayerAlpha两个方法来实现离屏渲染。它们能够为Canvas创建一个缓冲画布,后续对该Canvas的操作都将基于最新的画布上来完成。

  • saveLayer
    int saveLayer(RectF bounds, Paint paint)
    int saveLayer(float left, float top, float right, float bottom, Paint paint)
    创建缓冲画布,并保存画笔对象,并在离屏渲染结束后,画布restore()时,将缓冲画布用该画笔与旧画布进行混合。

  • saveLayerAlpha
    int saveLayerAlpha(RectF bounds, int alpha)
    int saveLayerAlpha(float left, float top, float right, float bottom, int alpha)
    创建缓冲画布,在离屏渲染结束后,画布restore()时,将缓冲画布用alpha与旧画布进行混合。

一般流程是:先绘制目标图(dst),然后设置Xfermode,再绘制原图(src),最后清除Xfermode

离屏渲染

代码如下:

//禁止使用硬件加速
setLayerType(View.LAYER_TYPE_HARDWARE, null); 
//离屏绘制
int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), paint, Canvas.ALL_SAVE_FLAG); 
//绘制目标图 
canvas.drawBitmap(createDstBitmap(), 0, 0, paint);  
//设置混合模式
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));  
//绘制原图
canvas.drawBitmap(createSrcBitmap(), 0, 0, paint);  
//清除混合模式
paint.setXfermode(null);  
canvas.restoreToCount(layerId); 

更多有关Xfermode和硬件加速的知识,请参考:Android绘制知识总结(Xfermode和硬件加速)

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

推荐阅读更多精彩内容