Android中canvas基本使用

canvas绘制

基本方法：

canvas.drawArc ()//（扇形）
canvas.drawCircle()//（圆）
canvas.drawOval()//（椭圆）
canvas.drawLine()//（线）
canvas.drawPoint()//（点）
canvas.drawRect()//（矩形）
canvas.drawRoundRect()//（圆角矩形）
canvas.drawVertices()//（顶点）(不了解)
canvas.drawPath()//（路径）
canvas.drawBitmap()// （位图）
canvas.drawText()// （文字）

1.扇形：

  /**
     * author : zhangy
     *
     * des    : 画扇形,圆心为外接矩形的中心
     *
     * date   : 2016/4/18
     */
    private void drawArc(Canvas canvas) {
        RectF rectF = new RectF(0, 0, 100, 100);
        Log.d("yang","left:" + rectF.left + "top:" +rectF.top + "right:" + rectF.right + "bottom:" + rectF.bottom);
        paint.setColor(Color.parseColor("#33333333"));
        //oval :指定圆弧的外轮廓矩形区域。
        //startAngle: 圆弧起始角度，单位为度。从180°为起始点
        //sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。
        //useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。如果false会将圆弧的两端用直线连接
        //paint: 绘制圆弧的画板属性，如颜色，是否填充等
        // public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)
        canvas.drawRect(rectF,paint);
        paint.setColor(Color.parseColor("#ff0000"));
        canvas.drawArc(rectF,0,90,true,paint);
    }

第三个参数传true

第三个参数传false

2.圆：

     
    /**
     * author : zhangy
     *
     * des    : 画圆
     *
     * date   : 2016/4/18
     */
    private void drawCircle(Canvas canvas) {
        paint.setColor(Color.GREEN);
        //cx ： 圆心在x轴上的坐标
        //cy :  圆心的y轴上的坐标
        //radius:  半径
        //public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint)
        canvas.drawCircle(50,50,50,paint);
    }

3.椭圆：

/**
     * author : zhangy
     *
     * des    : 画椭圆
     *
     * date   : 2016/4/18
     */
    private void drawOval(Canvas canvas) {
        paint.setColor(Color.BLACK);
        RectF rectF = new RectF(0, 0, 150, 100);
        //oval : 外接矩形
        //public void drawOval(@NonNull RectF oval, @NonNull Paint paint)
        canvas.drawOval(rectF,paint);
    }

4.线：

  /**
     * author : zhangy
     *
     * des    : 画线
     *
     * date   : 2016/4/18
     */
    private void drawLine(Canvas canvas) {
        //public void drawLine(float startX, float startY, float stopX, float stopY,@NonNull Paint paint)
        canvas.drawLine(0,0,100,100,paint);
        canvas.translate(0,110);

        //画一组线
        float[] pts={0,0,100,0,
                100,0,100,100,
                100,100,0,100,
                1,100,1,0};
        //线宽
        paint.setStrokeWidth((float) 2.0);
        //pts : 绘制直线的端点数组，每条直线占用4个数据。
        //public void drawLines(@Size(min=4,multiple=2) @NonNull float[] pts, @NonNull Paint paint)
//        canvas.drawLines(pts, paint);
        //offset : 指定跳过的数据个数
        //count : 指定取出数据的个数
        //public void drawLines(@Size(min=4,multiple=2) float[] pts, int offset, int count, Paint paint)
        canvas.drawLines(pts,4,12,paint);
    }

5.点：


 /**
     * author : zhangy
     *
     * des    : 画点
     *
     * date   : 2016/4/18
     */
    private void drawPoint(Canvas canvas) {
        paint.setStrokeWidth((float) 5.0);
        canvas.drawPoint(50,50,paint);
        canvas.translate(0,100);

        float[] pst = {20,20,40,40,60,60};
        paint.setColor(Color.RED);
        canvas.drawPoints(pst,paint);
        canvas.translate(0,100);
        //跳过前两个元素
        canvas.drawPoints(pst,2,4,paint);

    }

6.矩形：

    /**
     * author : zhangy
     *
     * des    : 画矩形
     *
     * date   : 2016/4/18
     */
    private void drawRect(Canvas canvas) {
        canvas.drawRect(0,0,100,100,paint);
        canvas.translate(0,110);

        canvas.drawRect(new RectF(0,0,100,100),paint);
        canvas.translate(0,110);

        canvas.drawRect(new Rect(0,0,100,100),paint);
    }

7.圆角矩形：


    /**
     * author : zhangy
     *
     * des    : 画圆角矩形
     *
     * date   : 2016/4/18
     */
    private void drawRoundRect(Canvas canvas) {
        paint.setColor(Color.BLUE);
        //rect : 要绘制的矩形
        //rx : x轴方向的弧度
        //ry : y轴方向上的弧度
        //public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
        canvas.drawRoundRect(new RectF(0,0,100,100),10,10,paint);
        //其他重载方法类似
    }

8.路径：

    /**
     * author : zhangy
     *
     * des    : 画路径
     *
     * date   : 2016/4/18
     */
    private void drawPath(Canvas canvas) {
        Path path = new Path();                     //Path对象
        path.moveTo(10, 50);                           //起始点
        path.lineTo(50, 50);                           //连线到下一点
        path.lineTo(10, 150);                      //连线到下一点
        path.lineTo(50, 100);                      //连线到下一点
        path.lineTo(50, 100);                      //连线到下一点
        paint.setColor(Color.RED);
        canvas.drawPath(path, paint);                   //绘制任意多边形
    }

9.位图：


    /**
     * author : zhangy
     *
     * des    : 画位图
     *
     * date   : 2016/4/18
     */
    private void drawBitmap(Canvas canvas) {
        Bitmap bitmap=((BitmapDrawable)getResources().getDrawable(R.mipmap.ic_launcher)).getBitmap();
        //left : 位图距左边的偏移量
        //top : 位图距顶部的偏移量
        //public void drawBitmap(@NonNull Bitmap bitmap, float left, float top, @Nullable Paint paint)
//        canvas.drawBitmap(bitmap,0,0,paint);
        Rect rect = new Rect(0, 0, 100, 100);
        RectF rectf = new RectF(0, 0, 50, 50);

        //src : 是对图片进行裁截，若是空null则显示整个图片
        //dst ：是图片在Canvas画布中显示的区域，大于src则把src的裁截区放大， 小于src则把src的裁截区缩小。
        //public void drawBitmap(@NonNull Bitmap bitmap, @Nullable Rect src, @NonNull RectF dst,@Nullable Paint paint)
        canvas.drawBitmap(bitmap,rect,rectf,paint);
    }

canvas.drawBitmap(bitmap,rect,rectf,paint)该方法是先用rect对原图进行裁剪，再根据rectf对裁剪后的图进行放大或缩小

10.文字：


     /**
     * author : zhangy
     *
     * des    : 绘制文字
     *
     * date   : 2016/4/18
     */
    private void drawText(Canvas canvas) {
        paint.setTextSize(30);
        Paint.FontMetrics fm = paint.getFontMetrics();
        //x : 绘制时x轴偏移量
        //y ：绘制时y轴偏移量
        //drawText(@NonNull String text, float x, float y, @NonNull Paint paint)
        canvas.drawText("zhangy",0,(fm.bottom - fm.top) / 2,paint);//这里要计算文字绘制的起点，因为文字是按baseLine来绘制的。
    }

绘制文字时注意文字绘制的起点位置如果不是很清楚如何计算，请参考这里

Canvas裁剪：

Canvas提供了ClipPath, ClipRect, ClipRegion 等方法来裁剪，通过Path, Rect ,Region 的不同组合，Android几乎可以支持任意现状的裁剪区域。

android.graphics包中定义了Point, Rect, Path, Region 这几种几何形状，Path可以为有圆弧，椭圆，二次曲线，三次曲线，线段，矩形等基本几何图形或是由这些基本几何图形组合而成，Path可以为开放或是闭合曲线。Rect提供了定义矩形的简洁方法。Region则支持通过区域的“加”，“减”，“并”，“异或”等逻辑运算由多个Region组合而成。Region.Op定义了Region支持的区域间运算种类。

Op是一个枚举，定义在Region类中。
假设用region1 去组合region2

    public enum Op {
            DIFFERENCE(0), //最终区域为region1 与 region2不同的区域
            REPLACE(1); //最终区域为为region2的区域
            INTERSECT(2), // 最终区域为region1 与 region2相交的区域
            UNION(3),      //最终区域为region1 与 region2组合一起的区域
            XOR(4),        //最终区域为region1 与 region2相交之外的区域
            REVERSE_DIFFERENCE(5), //最终区域为region2 与 region1不同的区域
     }

1.裁剪普通矩形：
我们先在canvas画布上裁剪出一个矩形作为背景(不贴图了)
这里canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。这里稍微解释一下，
当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，所以我们在操作之前调用canvas.save()来保存画布当前的状态，当操作之后取出之前保存过的状态，这样就不会对其他的元素进行影响


    /**
     * author : zhangy
     *
     * des    : 绘制背景
     *
     * date   : 2016/4/18
     */
    private void drawBg(Canvas canvas) {
         canvas.clipRect(0, 0, 100, 100);

        canvas.drawColor(Color.WHITE);

        paint.setColor(Color.RED);
        canvas.drawLine(0, 0, 100, 100, paint);

        paint.setColor(Color.GREEN);
        canvas.drawCircle(30, 70, 30, paint);

        paint.setColor(Color.BLUE);
        canvas.drawText("Clipping", 50, 50, paint);
    }

2.相减(DIFFERENCE)：最终区域为region1 与 region2不同的区域


    /**
     * author : zhangy
     *
     * des    : 相减
     *
     * date   : 2016/4/18
     */
    private void drawDiff(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 100, 100);
        canvas.clipRect(30, 30, 70, 70, Region.Op.DIFFERENCE);
        drawBg(canvas);
        canvas.restore();
    }

3.替代(REPLACE)：最终区域为为region2的区域

     /**
     * author : zhangy
     *
     * des    : 替代
     *
     * date   : 2016/4/18
     */
    private void drawReplace(Canvas canvas) {
         Path path = new Path();
        canvas.save();
        canvas.translate(10, 10);
        path.reset();
        canvas.clipPath(path); // makes the clip empty
        path.addCircle(50, 50, 50, Path.Direction.CCW);
        canvas.clipPath(path, Region.Op.REPLACE);
        drawBg(canvas);
        canvas.restore();

        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.REPLACE);
        drawBg(canvas);
        canvas.restore();
    }

4.相交(INTERSECT)：最终区域为region1 与 region2相交的区域

    /**
     * author : zhangy
     *
     * des    : 交集
     *
     * date   : 2016/4/18
     */
    private void drawIntersect(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 100, 100);
        canvas.clipRect(30, 30, 70, 70, Region.Op.INTERSECT);
        drawBg(canvas);
        canvas.restore();
    }

5.并集(UNION)：最终区域为region1 与 region2组合一起的区域

     /**
     * author : zhangy
     *
     * des    : 并集
     *
     * date   : 2016/4/18
     */
    private void drawUnion(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.UNION);
        drawBg(canvas);
        canvas.restore();
    }

6.除相交(XOR)：最终区域为region1 与 region2相交之外的区域

     /**
     * author : zhangy
     *
     * des    : 除相交
     *
     * date   : 2016/4/18
     */
    private void drawXor(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100, Region.Op.XOR);
        drawBg(canvas);
        canvas.restore();
    }

7.求同存异(REVERSE_DIFFERENCE)：最终区域为region2 与 region1不同的区域（后画的减去交集）

      /**
     * author : zhangy
     *
     * des    : 求同存异
     *
     * date   : 2016/4/18
     */
    private void drawReverse(Canvas canvas) {
        canvas.save();
        canvas.translate(10, 10);
        canvas.clipRect(0, 0, 60, 60);
        canvas.clipRect(40, 40, 100, 100,
                Region.Op.REVERSE_DIFFERENCE);
        drawBg(canvas);
        canvas.restore();
    }

最后编辑于：2017.12.03 04:29:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,406评论 6赞 503
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,732评论 3赞 393
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,711评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,380评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,432评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,301评论 1赞 301
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,145评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,008评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,443评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,649评论 3赞 334
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,795评论 1赞 347
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,501评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,119评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,731评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,865评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,899评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,724评论 2赞 354