一起看画布Android Canvas

作者: cc荣宣 | 来源:发表于2017-09-16 17:21 被阅读2320次

    版权声明:本文为博主原创文章,未经博主允许不得转载

    前言

    Canvas 本意是画布的意思,然而将它理解为绘制工具一点也不为过。通过 Canvas 提供的 API,你可以在画布上绘制出绝大部分图形,再配合上一些操作画布的 API,比如旋转剪裁等变换画布的操作,就能够巧妙地画出更加复杂的图形。

    drawXXX系列

    canvas.drawArc

    1. 方法:

       drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter,Paint paint)
       drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
      
    2. 画的方向为顺时针

    3. 对参数的解释:

      • userCenter 若为true表示此弧会和 RectF 中心相连形成扇形,否则,弧的两头直接相连形成图形。
      • startAngle,负数或大于360则对360模除。
      • sweepAngle,大于360,则画出一圈。
      • 角度:以 RectF 中心为坐标中心,中心所在直线为水平线,负角度弧斜上走,正角度弧斜下走,或者说以时钟三点钟为0度,顺时针为正,逆时针为负。
    4. 例子:

       mPaint.setAntiAlias(true);
       mPaint.setColor(Color.RED);
       RectF mRecF=new RectF(20,20,200,200);
       canvas.drawArc(mRecF,-45,135,true,mPaint);//以斜上45度为起点,顺时针扫过135度
      
    • useCenter=true
    • useCenter=false

    canvas.drawCircle

    1. 方法:

       drawCircle(float cx, float cy, float radius, Paint paint) 
      
    2. 对参数的解释:

      • cx,cy 为所画圆的中心坐标,radius 为圆的半径
    3. 例子

       mPaint.setAntiAlias(true);
       mPaint.setColor(Color.RED);
       canvas.drawCircle(100,100,80,mPaint);   
      
    • 圆心为(100,100),半径为80
    1. 注意: 当画笔设置了 StrokeWidth 时,圆的半径=内圆的半径+StrokeWidth/2

    canvas.drawBitmap

    1. 方法1:

       drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint) 
      

    对参数的解释:
    - bitmap:要画在画布上的位图
    - matrix:构建的矩阵作用于将要画出的位图

    1. 方法2:

       drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)
      

    对参数的解释:
    - src:可为 null,表示画整个位图,否则只花出位图的一块矩形区域图.subset of bitmap
    - dst:定义的一个矩形范围,位图会平移或缩放来将自身放入矩形内

    1. 方法3:

       drawBitmap(Bitmap bitmap, float left, float top, Paint paint)  
      
    2. 方法4:

       drawBitmapMesh(Bitmap bitmap, int meshWidth, int meshHeight, float[] verts, int vertOffset, int[] colors, int colorOffset, Paint paint) 
      

    网格扭曲,水波等的绘制
    知识:https://www.zybuluo.com/cxm-2016/note/506317

    1. 例子:
    • 方法1:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            Matrix matrix = new Matrix();
            matrix.postTranslate(100,0);//左移100
            matrix.postRotate(45);//顺时针旋转45度
            canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher),matrix,mPaint);  
      
    • 方法2:

           Rect src = new Rect(20, 20, 40, 40);//取bitmap上src区域的部分图像
           Rect dst = new Rect(100, 100, 200, 200);//绘制的最终区域,一定填满
           mPaint.setAntiAlias(true);
           mPaint.setColor(Color.RED);
           canvas.drawBitmap(BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher),src,dst,mPaint);  
      
    • 方法3:

             canvas.drawBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher), 100, 100, mPaint);  
      

    canvas.drawColor,drawRGB

    1. 方法:

       drawColor(int color, PorterDuff.Mode mode) 
      

    画整个画布的背景,但若区域受到剪裁,则只绘制剪裁区域的背景. 关键类 PorterDuff.Mode

    1. 方法:drawRGB(int r, int g, int b)
      同上

    canvas.drawLine(s)

    1. 方法1:

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

    对参数的解释:
    - 前四个参数为直线的起点和终点的 XY 轴坐标

    1. 方法2:

       drawLines(float[] pts,Paint paint)
      
    2. 方法3:

       drawLines(float[] pts, int offset, int count, Paint paint)  
      

    对参数的解释:
    - pts:待画的坐标点数组,格式为(x1,y1,x2,y2,...),至少4个值
    - offset:要跳过坐标点数组中几个值才开始画(必须是4的倍数)
    - count:至少为2,offset 之后数组的大小。

    1. 例子
    • 方法1:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(16);
            canvas.drawText("起点(20,100)", 22, 100, mPaint);
            canvas.drawText("终点(50,100)", 52, 150, mPaint);
            canvas.drawLine(20, 100, 50, 150, mPaint);  
      
    • 方法2:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(16);
            canvas.drawText("A1(20,100)", 0, 90, mPaint);
            canvas.drawText("A2(100,350)", 40, 370, mPaint);
            canvas.drawText("B1(100,100)", 80, 90, mPaint);
            canvas.drawText("B2(180,350)", 150, 370, mPaint);
            float[] points=new float[]{20,100,100,350,100,350,100,100,100,100,180,350};//至少4个值,即能够绘制一条直线
            canvas.drawLines(points,mPaint);  
      
    • 方法3:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(16);
            canvas.drawText("A1(100,350)", 40, 370, mPaint);
            canvas.drawText("B2(100,100)", 80, 90, mPaint);
            canvas.drawText("B3(180,350)", 150, 370, mPaint);
            float[] points=new float[]{20,100,100,350,100,350,100,100,100,100,180,350};//至少4个点
            canvas.drawLines(points,4,8,mPaint);  
      

    canvas.drawRect

    1. 方法1:

       void drawRect(float left, float top, float right, float bottom, Paint paint)  
      

    确定矩形四个顶点的位置配上画笔即可

    1. 方法2:

       void drawRect(Rect r, Paint paint) 
      

    矩形的四个位置为整型时使用

    1. 方法3:

       void drawRect(RectF r, Paint paint)  
      

    方法1的另一简版,矩形的四个位置为浮点型时使用

    1. 例子:

       mPaint.setAntiAlias(true);
       mPaint.setColor(Color.RED);
       canvas.drawRect(new RectF(20f, 20f, 120f, 120f), mPaint);
       //canvas.drawRect(new Rect(20, 20, 120, 120), mPaint);  
      

    canvas.drawOval

    绘制椭圆
    类似 drawRect

    canvas.drawPaint

    方法:
    drawPaint(Paint paint)
    自定义的 paint 画在整个画布上,等于用 paint 在画布上画一个无限大的矩形,但当前画布受到剪裁,则染色区域仅限于剪裁部分。

    canvas.drawPoint(s)

    绘制点,方法基本类似drawLine(s)

    canvas.drawRoundRect

    1. 方法1:

       drawRoundRect(RectF rect, float rx, float ry, Paint paint)   
      
    2. 方法2:

       drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)  
      

    对参数的解释:
    - rx,ry 表示 leftleft+rxleftleft+ry 所围区域做弧,其余三个角类似,当 rx=ry>=(right-left)/2 时表示画一个半径为 rx(ry) 的圆(刚好外接一个矩形)

    1. 例子
    • 方法1:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            RectF mRecf = new RectF(20, 100, 200, 200);
            canvas.drawRoundRect(mRecf, 30, 50, mPaint);  
      
    • 方法2:API level至少21,做法一样

    canvas.drawText

    1. 方法1:

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

    x,y 位置开始画 text
    注意:其中 y 表示文字的基线(baseline )所在的坐标,说白了就是我们小学写字用的那种带有横线的本子(一般都是按照一条基线来写字是吧?),用于规范你写的字是否成一条直线,否则很多人写着写着就往上飘了。而 x 坐标就是文字绘制的起始水平坐标,但是每个文字本身两侧都有一定的间隙,故实际文字的位置会比 x 的位置再偏右侧一些。

    1. 图:
      基线类似下图深绿色的横线

    2. 方法2:

       drawText(CharSequence text, int start, int end, float x, float y, Paint paint)  
      

    x,y 位置上画出 startend(不含 end) 之间的字符 CharSequence charSequence = "charSequence";

    1. 方法3:

       drawText(char[] text, int index, int count, float x, float y, Paint paint)  
      

    对参数的解释:
    - index:表示从第几个字符开始,
    - count:表示截取的数组长度
    - 字符数组的定义: char[] a="abc".toCharArray()

    1. 方法4:

       drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)
      

    对参数的解释:
    - path:文本绘制的路径(关键)
    - hOffset:相对于路径的水平偏移量
    - vOffset:相对于路径的垂直偏移量

    1. 方法5:

       drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)  
      

      方法3和4的合体

    2. 方法6:

       drawTextRun(CharSequence text, int start, int end, int contextStart, int contextEnd, float x, float y, boolean isRtl, Paint paint)  
      

    对参数的解释:
    - contextStart:可选,直接=start
    - contextEnd:可选,直接=end
    - x,y:文字绘制起点
    - isRt1(isRightToLeft):文字是否支持rtl
    - 0 <= contextStart <= start <= end <= contextEnd <= text.length

    1. 方法7:

       drawTextRun(char[] text, int index, int count, int contextIndex, int contextCount, float x, float y, boolean isRtl, Paint paint)  
      

    方法3和方法6合体

    ```count = end - start, contextCount = contextEnd - contextStart.``` 
    
    1. 例子:
    • 方法1:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(20);
            canvas.drawText("Canvas学习",50,100,mPaint);  
      
    • 方法2:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(20);
            CharSequence charSequence="Canvas学习";
            canvas.drawText(charSequence,1,charSequence.length(),30,50,mPaint);  
      
    • 方法3:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(20);
            char[] chars="Canvas学习".toCharArray();
            canvas.drawText(chars,1,chars.length-1,30,50,mPaint);  
      

    效果图同方法2

    • 方法4:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            mPaint.setTextSize(20);
            Path path=new Path();
            String text="Canvas学习";
            path.addCircle(100,100,50, Path.Direction.CCW);
            canvas.drawTextOnPath(text,path,0f,0f,mPaint);  
      

    canvas.drawPath

    方法:drawPath(Path path, Paint paint)
    根据定义的路径画出图
    例子:

            mPaint.setAntiAlias(true);
            mPaint.setColor(Color.RED);
            Path path=new Path();
            path.addCircle(100,100,50, Path.Direction.CCW);
            canvas.drawPath(path,mPaint);  
    

    效果等于画一个圆

    canvas.clipxxx系列

    canvas.clipPath

    1. 方法1:

       clipPath(Path path)  
      

    按所定义的路线剪裁,默认Region.Op.INTERSECT表示剪裁出相交的部分

    1. 方法2:

       clipPath(Path path, Region.Op op)  
      

    解释:用指定的路径 path 修改当前的剪裁
    对op参数的理解:以剪裁两次的区域分别为A,B来区别
    - Region.Op.DIFFERENCE:剪裁出差异的部分,类似 A-B 部分
    - Region.Op.REPLACE:后剪裁B的覆盖剪裁的A
    - Region.Op.REVERSE_DEFFERENCE:剪裁出差异的部分,类似 B-A 部分
    - Region.Op.INTERSECT:剪裁出相交的部分,类似 A交B 部分
    - Region.Op.UNION:剪裁出AB合并的部分,类似** AUB**
    - Region.Op.XOR:是** (AUB)-(A交B)** 刚好与** A交B** 相对

    1. 方法3:

       clipRect(Rect[F] rect, Region.Op op)[]表示可选  
      

    解释:用指定的矩形来修改当前的剪裁

    1. 方法4:

       clipRect(Rect rect)  
      

    剪裁一个矩形区域,还有其他能构造矩形的方法不再列出

    1. 例子(以剪裁路径为例):
      首次剪裁

           Path path=new Path();
           path.addCircle(100,100,50, Path.Direction.CCW);
           canvas.clipPath(path);
           canvas.clipPath(path);
           canvas.drawColor(Color.RED);//红色区域即为剪裁的区域  
      

    由于 clipPath 方法剪裁模式默认为Region.Op.INTERSECT,故当前剪裁部分和整个画布相交即为本身。

    1. 剪裁模式(绿色区域为最终得到的剪裁部分)

       mPaint.setAntiAlias(true);
       mPaint.setColor(Color.RED);
       canvas.drawColor(Color.BLUE);
       canvas.drawRect(new RectF(20, 20, 120, 120), mPaint);
       canvas.drawCircle(120, 70, 50, mPaint);
       canvas.clipRect(new RectF(20, 20, 120, 120));
       Path path = new Path();
       path.addCircle(120, 70, 50, Path.Direction.CCW);
       canvas.clipPath(path, Region.Op.INTERSECT);
       canvas.drawColor(Color.GREEN);  
      
    • Region.Op.INTERSECT
    • Region.Op.REPLACE
    • Region.Op.REVERSE_DEFFERENCE
    • Region.Op.UNION
    • Region.Op.XOR

    canvas的保存与恢复

    1. 解释:用来保存或恢复 Canvas 的状态
    2. 作用:save 之后可以调用 Canvas 的平移、放缩、旋转、错切、裁剪等对当前画布进行操作,再进行相应的绘制,避免影响画布上已绘制的 view,配合 canvas.restore()(将当前画布恢复到初始状态) 使用

    canvas的变幻操作

    canvas.translate

    1. 方法:

       canvas.translate(float dx, float dy)  
      

    作用:移动当前画布水平距离 dx,竖直距离 dy

    1. 例子:

       mPaint.setAntiAlias(true);
       mPaint.setColor(Color.RED);
       canvas.drawColor(Color.BLUE);
       canvas.translate(100,100);
       canvas.drawCircle(0,0,50,mPaint);  
      

    canvas.scale

    1. 方法1:

       canvas.scale(float sx, float sy)  
      

    作用:sx、syx、y 方向上缩放的倍数,画布缩放后,再画出的图片相应的坐标都会进行缩放

    1. 例子:

      mPaint.setAntiAlias(true);
      mPaint.setColor(Color.RED);
      canvas.drawColor(Color.BLUE);
      canvas.save();
      canvas.scale(0.5f,0.5f);//x,y均缩小一半
      canvas.drawCircle(100,100,50,mPaint);
      canvas.restore();
      mPaint.setColor(Color.WHITE);
      canvas.drawCircle(100,100,50,mPaint);

    2. 方法2:

       canvas.scale (float sx, float sy, float px, float py)  
      

    作用:缩放画布并平移画布到基准点 (px,py)
    对参数的解释:
    - px,py 为缩放后画布新的坐标原点(也叫缩放基准点)

    1. 例子:

       mPaint.setAntiAlias(true);
       canvas.drawColor(Color.BLUE);
       mPaint.setColor(Color.WHITE);
       canvas.drawCircle(100,100,50,mPaint);
       canvas.save();
       canvas.scale(0.5f,0.5f,100,100);
       mPaint.setColor(Color.RED);
       canvas.drawCircle(100,100,50,mPaint);
       canvas.restore();  
      

    canvas.rotate

    1. 方法:

       canvas.rotate(float degrees)  
      

    作用:顺时针旋转当前画布一定角度,也可加入基准点坐标

    1. 例子:

      mPaint.setAntiAlias(true);
      canvas.drawColor(Color.BLUE);
      mPaint.setColor(Color.WHITE);
      canvas.drawRect(new RectF(80,80,180,180),mPaint);
      canvas.save();
      canvas.rotate(45);
      //canvas.rotate(45,200,200);
      mPaint.setColor(Color.RED);
      canvas.drawRect(new RectF(80,80,180,180),mPaint);
      canvas.restore();

    • 无基准点

    • 有基准点 (200,200)

    canvas.skew

    1. 方法:

       canvas.skew(float sx, float sy)  
      

    作用:画布的错切

    • sx:将画布在 x 方向上倾斜相应的角度,sx 为倾斜角度的 tan 值;
    • sy:将画布在 y 轴方向上倾斜相应的角度,sy 为倾斜角度的 tan 值;
      比如在 X 轴方向上倾斜45度,tan45=1;
    1. 例子:

       mPaint.setAntiAlias(true);
       canvas.drawColor(Color.BLUE);
       mPaint.setColor(Color.WHITE);
       canvas.drawRect(new RectF(0,0,180,180),mPaint);
       canvas.save();
       canvas.skew(1,0);//画布X轴倾斜45度
       mPaint.setColor(Color.RED);
       canvas.drawRect(new RectF(0,0,180,180),mPaint);
       canvas.restore();  
      

    总结

    以上大致介绍了 Canvas 类中众多绘制方法。首先,先对方法进行解析;其次,给出相应的示例代码并结合运行效果,旨在帮助读者更好地理解诸如上述绘制方法的基本使用;最后,对于方法的理解如有纰漏,欢迎指正。

    感谢

    官方Canvas类API
    Canvas之translate、scale、rotate、skew方法讲解

    相关文章

      网友评论

      本文标题: 一起看画布Android Canvas

      本文链接:https://www.haomeiwen.com/subject/apcusxtx.html