【Android自定义View】绘图之Canvas篇(五)

【Android自定义View】绘图之Canvas篇(五)

Android小彩虹2021-08-15 19:25:47220A+A-

前言

Canvas就是我们常说的画布,之前说的所有画图操作,都是作用于Canvas之上。

Canvas主要有以下控制方法,这些方法都是作用于Canvas整体

translate 平移

我们先绘制一个矩形,平移之后,再次绘制

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        //平移
        canvas.translate(100, 100);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png
可以看到,2个矩形并没有重叠

rotate 旋转

还是之前的矩形,为了方便理解,加了2条辅助线

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        canvas.drawLine(0, 0, 1000, 1000, paint);
        //旋转
        canvas.rotate(30);
        paint.setColor(Color.RED);
        canvas.drawLine(0, 0, 1000, 1000, paint);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png
可以看到,默认的旋转点是(0,0),当然我们也可以指定原点 rotate(float degrees, float px, float py)

        for (int i = 0; i < 6; i++) {
            canvas.rotate(360 / 6, 500, 1000);
            canvas.drawLine(500, 500, 500, 1000, paint);
        }

image.png
其实是先平移,在旋转,再平移回去,源码如下

    public final void rotate(float degrees, float px, float py) {
        if (degrees == 0.0f) return;
        translate(px, py);
        rotate(degrees);
        translate(-px, -py);
    }

image.png

scale 缩放

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
       //缩放
        canvas.scale(0.5f, 0.5f);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

skew 斜切

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
       //缩放
        canvas.skew(0, 0.5f);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

clip系列

clipRect(Rect rect)

clipRect(RectF rect)

clipRect(float left, float top, float right, float bottom)

clipPath(Path path)

裁剪之后,canvas其他区域会被裁剪掉,只有区域内画的才可见

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        canvas.clipRect(new Rect(500, 500, 600, 600));
        canvas.drawColor(Color.RED);
        canvas.drawCircle(500, 500, 50, paint);

image.png

save 保存与restore 回复

之前的所有操作对于canvas 都是不可逆的,比如我们做了许多操作之后,希望将canvas的状态保存时,就要用到save。调用save方法时,会保存当前canvas状态,将其放到特定的栈中;调用restore方法时,再从栈中取出。

来看个例子,

        canvas.drawRect(new Rect(0, 0, 1000, 1000), paint);

        canvas.clipRect(new Rect(100, 100, 900, 900));
        canvas.drawColor(Color.RED);
        canvas.save();
        canvas.clipRect(new Rect(200, 200, 800, 800));
        canvas.drawColor(Color.GREEN);
        canvas.save();
        canvas.clipRect(new Rect(300, 300, 700, 700));
        canvas.drawColor(Color.YELLOW);
        canvas.save();

image.png
当我们调用2次 restore

        canvas.restore();
        canvas.restore();
        canvas.drawColor(Color.MAGENTA);

image.png

原先绿色部分被填充为紫红色,符合栈后进先出的逻辑。

你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们