Android的Canvas各函数全解析

最新推荐文章于 2024-05-07 09:48:30 发布
最新推荐文章于 2024-05-07 09:48:30 发布
阅读量2.8k 收藏 5
点赞数 1
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wolinxuebin/article/details/52614054
版权

目录：

1、save
2、 saveLayer
3、restore
4、Canvas的矩阵变换
5、 clipPath详解
     5.1  DIFFERENCE
     5.2  REVERSE_DIFFERENCE
     5.3  INTERSECT
     5.4  UNION
     5.5  XOR
     5.6  REPLACE
6、 clipPath详解
7、 clipRegion详解
8、 setDrawFilter
9、 drawRGB
10、 drawColor
11、混合模式
12、 drawPoint and  drawLine
13、 drawRect, drawOval,drawCycle, drawArc,drawBoundRect
14、 drawBitmap
15、drawText、drawTextOnPath、drawPosText
15.1 drawText
15.2 drawTextOnPath
15.3 drawPosText

1、save

  • save()，将会保存matrix及clip操作，保存的操作（translate,scale,rotate,skew,concat or clipRect,clipPath）

  • save(int saveFlags) 可选参数为 MATRIX SAVE_FLAG或CLIP_SAVE_FLAG
     注意，返回值表示可认为是相应的id，表示那一次保存。


2、saveLayer

  • 功能和save相似，但是不同于save直接作用于canvas，saveLayer是作用于某一个图层。google官方建议，如果在save能满足条件的情况下，尽量适用save，因为saveLayer会造成大于2次的渲染，造成不必要的资源浪费。如果在view的hardware layer（LAYER_TYPE_HARDWARE）能使用的情况下，尽可能的使用，会比saveLayer有更好的效果。
      【例子2-1】实际应用中，出现过想使用混合模式去除相较的部分，但是由于两个图片都是有透明度的，造成混合后效果不理想，这个时候可以采用saveLayer将其中一个使用不透明的替代，混合之后再加入的canvas中

表2-1 表示各个标记位属于对哪个函数有效

标记 适用
MATRIX_SAVE_FLAG
save
saveLayer
CLIP_SAVE_FLAG
save
saveLayer
HAS_ALPHA_LAYER_SAVE_FLAG saveLayer
FULL_COLOR_LAYER_SAVE_FLAG saveLayer
CLIP_TO_LAYER_SAVE_FLAG saveLayer
ALL_SAVE_FLAG
save
saveLayer

3、restore

     对应于之前的save进行压栈操作，这里进行相应的出栈操作。
     restoreToCount（int）表示弹出至相应的保存（如果相应的保存不在top,会将其他在他之后操作的图层全部pop出来）

4、Canvas的矩阵变换

  • translate(float x, float y) 将canvas进行平移
  • scale(float sx, float sy) 为基准(0，0)为基准进行缩放
  • scale(float sx, float sy, float px, float py)为基准(px，py)为基准进行缩放
  • rotate(float degrees) 为基准(0，0)进行画布旋转
  • rotate(float degrees, float px, float py) 为基准(px，py)进行画布旋转
  • skew(float sx, float sy) 交错处理
  • concat(@Nullable Matrix matrix)   Pre-concatenating a to b means setting a = b × a. 
  • setMatrix(@Nullable Matrix matrix) 直接设置覆盖原先矩阵
  • getMatrix(@NonNull Matrix ctm) 获取画布矩阵

5、 clipRect详解

  • clipRect(@NonNull RectF rect, @NonNull Region.Op op)
  • clipRect(@NonNull Rect rect, @NonNull Region.Op op)
  • clipRect(@NonNull RectF rect)
  • clipRect(@NonNull Rect rect)
  • clipRect(float left, float top, float right, float bottom, @NonNull Region.Op op)
  • clipRect(float left, float top, float right, float bottom)
  • clipRect(int left, int top, int right, int bottom)
     上述函数看着有很多选择，其实归结起来就两个参数，第一参数是给定具体剪切的 范围，第二个参数是给定具体的截取完之后的区域的 填充模式。
     范围这里参数很好理解，填充模式有如下6种，如下表：
表 5-1 填充模式及说明

模式定义 说明
DIFFERENCE A-B区域
INTERSECT A与B的交集
UNION A与B的并集
XOR （A∪B） - （A∩B）
REVERSE_DIFFERENCE B-A区域
REPLACE B将完全显示，如果和A有交集覆盖A，也就是B

注：假设剪切前为A,剪切区域为B

    
上图中绿色为剪切区域A，右边红色区域为B，中间深红色为两者的相交区域
    

     5.1 DIFFERENCE

     表示将绘制出A-B的区域，如下图

     5.2 REVERSE_DIFFERENCE

     将绘制出B-A的区域，如下图
     

     5.3 INTERSECT

               A与B的交集( 默认模式)

     5.4 UNION

          A与B的并集,

     5.5 XOR

              （A∪B） - （A∩B）
    

     5.6 REPLACE

          B将完全显示，如果和A有交集覆盖A，也就是整个B


6、 clipPath详解

     和5的clipRect类似，唯一的区别是一个是矩阵边框，另外一个是以path为边框。
      或者说，起始Rect是有四条line组成的，也就是说，Rect仅仅是path的一种特殊形式。 Path可以实现，line,quad(二次贝塞尔曲线)，cubic(三次贝塞尔曲线)，cycle, rect。
  • clipPath(@NonNull Path path, @NonNull Region.Op op)
  • clipPath(@NonNull Path path)
               下图是通过3条直线和一条cubic曲线划出来的区域。
     


7、 clipRegion详解（API 21已经废弃）

     和clipPath和clipRect的区别是，当前画布的矩阵变换对clipPath和clipRect有效，但对clipRegion无效。在5.5的实验中，可以看到相应的图，如果什么都不变换，直接将clipRect变为clipRegion则会出现如下的图：

从上图可以猜测，我们当前view的canvas其实已经做过相应的matrix变换了，所以我们采用region则直接忽略这种变换，直接以屏幕左上角作为原点。（注，蓝色区域是采用drawRect画出来的，所以会收到canvas的影响）

8、 setDrawFilter

    这个没怎么查到相应的资料，唯一类似的参考地址为： http://m.blog.csdn.net/article/details?id=47151293  
   文章中说道，唯一使用的方式是进行canvas的抗锯齿的配置，代码如下：
mDrawFilter = new PaintFlagsDrawFilter( 0 , Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG); canvas.setDrawFilter(mDrawFilter); // 从canvas层面去除绘制时锯齿

9、 drawRGB

  • drawRGB(int r, int g, int b)
  • drawARGB(int a, int r, int g, int b)
     这两个函数很好理解，直接在画布上绘制相应颜色，后面一个函数表示可以绘制alpha的值。

10、 drawColor

     参考网址：
  • drawColor(@ColorInt int color)
  • drawColor(@ColorInt int color, @NonNull PorterDuff.Mode mode)
     和9的drawRGB直接就是调用了drawColor函数。这里第二个函数带有一个混合模式选择，将在11小节中介绍。

11、混合模式



属性 说明 颜色 对比
CLEAR 清理相应的颜色 [0, 0]  
SRC 显示上层绘制图片 [Sa, Sc]  
DST 显示下层绘制图片 [Da, Dc]  
SRC_OVER 正常绘制显示，上下层绘制叠盖。（后者覆盖前者） [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] 和SRC的区别是，存在alpha的时候，SRC完全显示src,而SRC_OVER则是存在混合
DST_OVER
上下层都显示。下层居上显示。

[Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc]  
SRC_IN    取两层绘制交集。显示上层。 [Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc]  
DST_IN   取两层绘制交集。显示下层。 [Sa * Da, Sa * Dc]  
SRC_OUT  取上层绘制非交集部分。 [Sa * (1 - Da), Sc * (1 - Da)]  
DST_OUT  取下层绘制非交集部分。 [Da * (1 - Sa), Dc * (1 - Sa)]  
SRC_ATOP  取下层非交集部分与上层交集部分 [Da, Sc * Da + (1 - Sa) * Dc]  
DST_ATOP  取上层非交集部分与下层交集部分 [Sa, Sa * Dc + Sc * (1 - Da)]  
XOR   异或：去除两图层交集部分 [Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc]  
DARKEN   取两图层全部区域，交集部分颜色加深 [Sa + Da - Sa*Da, Sc*(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)]  
LIGHTEN   取两图层全部，点亮交集部分颜色 [Sa + Da - Sa*Da, Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)]  
MULTIPLY   取两图层交集部分叠加后颜色 [Sa * Da, Sc * Dc]  
SCREEN  取两图层全部区域，交集部分变为透明色 [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]  
ADD   Saturate(S + D)  
OVERLAY   Saturate(S + D)  


图11-1 存在透明度情况下，左图为采用SRC模式，右图才作用SRC_OVER模式。


图11-2 在图片为 非透明的情况下各模式的效果图

图11-3 在图片为 透明的情况下各模式的效果图

 

12、 drawPoint and drawLine

  • drawPoints(@Size(multiple=2) float[] pts, int offset, int count,@NonNull Paint paint)
  • drawPoints(@Size(multiple=2) @NonNull float[] pts, @NonNull Paint paint)
  • drawPoint(float x, float y, @NonNull Paint paint)
  • drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint)
  • drawLines(@Size(min=4,multiple=2) float[] pts, int offset, int count, Paint paint)
  • drawLines(@Size(min=4,multiple=2) @NonNull float[] pts, @NonNull Paint paint)
     这两者区别不是很大，画点和画直线罢了。

13、 drawRect,drawOval,drawCycle, drawArc,drawBoundRect,drawPath


图12-1 drawRect、drawOval、drawCycle、drawArc集合图


图12-2 drawArc的四种形式

  • drawRect可以绘制矩形，设置paint的模式，就可绘制出空心或者实心的矩形
  •  drawOval 可以绘制圆或者椭圆
  • drawCycle 绘制圆行（和drawOval不同是，drawOval是采用Rect的形式，定了4个点，然后画相应的图形，而drawCycle是采用给定圆心坐标以及半径来进行绘制）
  • drawArc 相当于在drawOval的基础上，可以绘制圆弧，（booleanuseCenter） 这个参数设为fasle为图12-2左边两种形式，如果设为true则为右边两种形式。
  •  drawBoundRect 这个是画的如下 12-3这样的图，给定一个RectF, 还有两个参数，rx, ry，决定了4个角的弧度。如图12-4右边图形，ry=2*rx，可以看到不同的角的弯度。
  • drawPath 这个可以完成你能想象的到的图形，效果如图12-5。
     
图12-3 drawBoundRect图

图 12-4 drawBoundRect图（ry=2*rx）

    

图 12-5 drawPath图（左为Fill，右为Stroke）

14、 drawBitmap

  • drawBitmap(Bitmap bitmap, float left, float top, Paint paint)
            >>>> left, top 表示开始画bitmap的起始位置
  • drawBitmap(Bitmap bitmap,  Rect src,  RectF dst, Paint paint)
  • drawBitmap(Bitmap bitmap,  Rect src,  Rect dst, Paint paint)
            >>>> src表示对图片的剪切，dst表示绘制的区域（如果绘制区域比绘制内容小，则绘制相应的内容；如果绘制区域比绘制内容大，则将绘制内容进行延伸）

15、drawText、drawTextOnPath、drawPosText


15.1 drawText

  • drawText(char[] text, int index, int count, float x, float y, Paint paint)
  • drawText(String text, float x, float y, Paint paint)
  • drawText(String text, int start, int end, float x, float y, Paint paint) 
  • drawText(CharSequence text, int start, int end, float x, float y, Paint paint)
     drawText 有三种形式，总结起来就一种，第一参数（有些使用char[]， index, count三个参数表示）为需要绘制的Text的内容，第二、三个参数（x,y）为表示为开始绘制的点，需要注意的一点是，text的基准点不是绘制其他图形的时候的左上角那个点，而是baseline所代表的位置。如图15-1所示，其中origin，便是参数是x,y所代表的点。

图 15-1 text的各种参数

15.2 drawTextOnPath

  • drawTextOnPath(@NonNull char[] text, int index, int count, @NonNull Path path,
            float hOffset, float vOffset, @NonNull Paint paint)
  • drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,
            float vOffset, @NonNull Paint paint)
      path表示以path作为text的基准线（baseLine）进行绘制， hoffet表示横向的偏离（沿着path）第一个开始绘制的位置如图15-2中的第一行第三列的效果，如果值设为负，如图15-2中的第一行第二列的效果，会出现重叠。其次，绘制text的范围为path,所以突然text太长， 尾部为重叠，15-2中的第一行第一列的效果。
voffet表示纵向的偏离，如图15-2的第二行所示。

图15-2 drawTextOnPath的各种形式
     

15.3 drawPosText

          根据传入的pos参数绘制text，效果如下图：

图 15-3 drawPosText




















林子木
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android中canvas的clipRect和concate调用顺序不同导致的图像效果不同。
linxingqianglai的专栏
08-12 2020
android中canvas的clipRect和concate调用顺序不同导致的图像效果不同。
Android canvas drawBitmap方法详解及实例
08-31
在Android开发中，Canvas是用于在屏幕上绘制图形和图像的核心组件。`drawBitmap()`方法是Canvas的一个关键函数，用于在Canvas上绘制Bitmap图像。本文将深入解析`drawBitmap()`方法的参数及其用法，并通过实例来说明...
Android中的canvas介绍
热门推荐
linghu_java的专栏
05-17 2万+
一个画图需要四大基本要素： 1、一个用来保存像素的Bitmap； 2、一个Canvas画布，绘制Bitmap操作； 3、绘制的东西 4、绘制的画笔Paint（颜色和样式） 1、如何获得一个Canvas对象。 Canvas对象的获取方式有三种： 第一种我们通过重写View.onDraw方法，View中的Canvas对象会被当做参数传递
2024年Android最新Canvas中的裁剪师讲解与实战——Android高级UI，2024年最新小红书安卓面试题目
最新发布
2401_84545579的博客
05-07 836
文章所有资料全部已经打包整理好，另外小编手头上整理了大量Android架构师全套学习资料，Android核心高级技术PDF文档+全套高级学习资料+视频+2021 BAT 大厂面试真题解析资料展示：网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
Android图形图像处理：canvas的save()和restore()函数详解
lxj1137800599的专栏
12-18 1052
在Android图形图像处理中，canvas.save();和canvas.restore();是成对出现的，作用是用来保存画布的状态和取出保存前的状态。比如当我们对画布进行平移旋转等操作时，有时我们只是想对特定的元素进行操作，比如图片，一个矩形，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，所以一般我们在操作之前调用canvas
Android中的Canvas（二）
abc20899的专栏
05-06 133
好了 我不知道 大家 看完这个例子 有没有什么不明白的地方？ 或者哪里有疑问？为什么要这样？ 我就说说我的疑问吧，我看完这个例子就有很多问题。大家都注意到了 我们的testView里边有一个initBitmap方法 还有这么一句。 Java代码： canvas.drawText(mstrTitle, 0, 100, p); 这个方法里边的 代码 请大家 一定要仔细 看看 我看完...
android 之 Canvas.rotate(float degress,float px,float py)
weixin_34107955的博客
08-03 262
Canvas.rotate(float degress,float px,float py)旋转的是坐标轴
Android编程之绘图canvas基本用法示例
08-29
本文将深入探讨Android Canvas的基本用法，通过实例来解析其相关的方法和使用技巧。 首先，我们需要创建一个自定义的`View`类，例如`GraphicsView`，它继承自`View`。在这个类中，我们将实现`onDraw()`方法，这是...
Android Canvas Demo
04-07
《Android Canvas 演绎：绘制的艺术与...以上就是关于"Android Canvas Demo"的主要知识点，希望这个详细的解析能帮助你理解和掌握Android图形绘制的核心技术，让你在Android应用开发中挥洒自如，创造出独特的视觉体验。
Android自定义View多种效果解析
08-27
2. **在构造方法中获取属性**：在自定义View的构造函数中，通过`TypedArray`对象来获取这些属性的值。使用`context.obtainStyledAttributes()`方法并传入`AttributeSet`参数，以及自定义属性数组的ID，可以获取到一...
Android-CoordinateAxisChart在Android绘制坐标轴函数图像
08-13
在Android应用开发中，视觉元素的呈现是至关重要的，尤其是数据可视化部分，它能帮助用户更好地理解和解析信息。"Android-CoordinateAxisChart在Android绘制坐标轴函数图像"这个项目专注于利用自定义视图来实现坐标...
Android之Canvas详解
宇宝守护神(rainyang)的博客
04-13 1100
canvas 可译为画布，Android官方给他的解释是：The Canvas class holds the "draw" calls. 我理解的是canvas是专门用来显示画上去的东西的类，也就是画布的功能了。 1.构造方法 canvas有两个构造函数 (1)Canvas() (2)Canvas(Bitmap bitmap) (ps:View的onDraw（Canvas c
Android绘图Canvas与Paint属性汇总
WernerZeiss的博客
01-18 786
在我们写自定义控件画比较复杂的图形时，可能会经常出现忘记画布或画笔的某些属性和参数怎么写的情况（至少我是这样…），因此在查询资料后在这里总结一下，以便查阅。 Canvas属性 DrawPoint，绘制点 canvas.drawPoint(x,y,paint); DrawLine，绘制直线 canvas.drawLine(startX,startY,endX,endY,
Android 画布canvas concat(Matrix matrix)
正在Android的学习路上
10-29 2080
void concat(Matrix matrix) Preconcat the current matrix with the specified matrix. 可以理解成对matrix的变换应用到canvas上的所有对象。 参数Matrix是The Matrix class holds a 3x3 matrix for transforming coordinates.意思。可以理...
Android常用的canvas方法,Android 自定义 View Canvas 基本操作
weixin_33489687的博客
05-25 245
实现的效果图效果图主要用到的知识点有：canvas.save();canvas.restore();canvas.translate();canvas.scale();canvas.rotate();canvas.save()和canvas.restore() 是成对出现的，canvas.save()函数在前，·canvas.restore()函数在后，用来保证在这两个函数之间所做的操作不会对原来...
Android - Canvas 简单总结
04-22 1454
在自定义控件时，经常需要使用canvas、paint等，在canvas类中，绘画基本都是靠drawXXX()方法来完成的，在这些方法中，很多时候都需要用到paint类型的参数，本文先对paint类常用的一些设置做个简单总结 paint 属性设置简单总结 图形绘制相关： public void set(Paint src)  根据已有画笔的属性进行赋值 public void
android canvas\paint\path简单使用（自定义view必学）
许佳佳的博客
04-01 2996
最近学到自定义view，也是涉及到了canvas、paint、path的使用，此内容比较简单。 写此文章，一方面是笔者自己知识点的记录。另一方面希望能给部分新手启发。 此三者一般会在自定义view的onDraw()中用到： canvas：决定view的布局（位置，画布颜色，形状） paint：决定view的属性（颜色，字体大小，风格） path：路径（path的用法深入比较复杂，
android自定义游戏闯关图,Android自定义View(四) -- Canvas
weixin_39609500的博客
05-25 184
本文计划根据HenCoder系列文章进行学习，所以代码风格及博文素材可能会摘自其中。1 范围裁切范围裁切有两个方法： clipRect() 和 clipPath()。裁切方法之后的绘制代码，都会被限制在裁切范围内。1.1 clipRect()使用很简单，直接应用：canvas.clipRect(100,100,400,400);Bitmap bitmap = BitmapFactory.dec...
android图形系统详解一：Canvas
mmdev
03-29 160
概述 　　当写一个应用时，恰当的决定你的图形需求是很重要的．不同的图形任务对应不同的技术．例如，一个静态应用的图形和动画的实现肯定与一个交互式游戏非常不同．这里，我们将讨论一些在android上绘制图形时的操作以及它们最适合应用的任务． Canvas和Drawables 　　Android提供了一系列View部件来为大多数用户界面提供通常的功能．你也可以扩展这些部件来修改它们的外观和行...
Android折叠布局FoldingLayout深度解析与实战
setPolyToPoly方法则是Matrix的一个关键函数，用于将一组坐标点映射到另一组坐标点，从而实现复杂的图像变形。在折叠布局中，这个方法用于改变图片的形状，模拟折叠效果。例如，我们可以创建两个浮点数数组，一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值