Canvas的平移，裁剪，保存及恢复

立即下载用AI写一个

发布时间：2019-05-06

0人 | 浏览：4027次 | 收藏 |

技术：Android

运行环境：androidstudio

概述

在前讲到Canvas的时候，多是讲解canvas怎么画线，画点，画圆等，都是对图形等的操作，那么今天就来讲讲Canvas对画布本身的操作。

详细

###前言
在前讲到Canvas的时候，多是讲解canvas怎么画线，画点，画圆等，都是对图形等的操作，那么今天就来讲讲Canvas对画布本身的操作。

今天涉及的内容有：
1. Canvas的平移
2. Canvas的裁剪
3. Canvas的保存和恢复
4. 项目结构图

####一.Canvas的平移
讲到画布的平移的话，首先我们要介绍的是Canvas相对屏幕而言，其坐标基点。
![image.png](/contentImages/image/jianshu/6127340-b946125cfb24320c.png)
如上图，坐标基点在屏幕的左上角，屏幕右方向为x轴正方向，屏幕的下方为y轴正方向。
Canvas的平移方法为：
```
canvas.translate(float dx,float dy);
```
其中 dx，dy分别表示canvas相对屏幕在xy方向的偏移量。
下面以例子讲解。
先在画布上以屏幕坐标基点画一个矩形，代码如下：
```
        Paint paint=new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);

Rect rect=new Rect();
        rect.set(0,0,400,220);
        canvas.drawRect(rect,paint);
```
效果如下：
![image.png](/contentImages/image/jianshu/6127340-2f2867f2343cd2fc.png)

然后将canvas以坐标（100，100）进行平移，接着画一个矩形，代码如下：
```
        canvas.translate(100,100);

Paint paint=new Paint();
        paint.setColor(Color.GREEN);
        paint.setStyle(Paint.Style.FILL);

Rect rect=new Rect();
        rect.set(0,0,400,220);
        canvas.drawRect(rect,paint);
```
两段代码一起运行后，效果图如下：
![image.png](/contentImages/image/jianshu/6127340-48ba11a140289af5.png)

关于canvas的使用需要注意以下几点：
- Canvas每次调用drawXXX 方法的时候都会产生一个新的画布
- Canvas在调用drawXXX 函数前调用的 canvas的平移，旋转，裁剪都是不可逆的
- Canvas在调用平移方法后，超出屏幕部分的画布不会显示
####二.Canvas的裁剪
canvas的裁剪方法主要以 clipXXX系列，方法窥探如下：
![image.png](/contentImages/image/jianshu/6127340-22bfdf2b0e190a16.png)
下面主要canvas裁剪矩形为范例进行讲解。
现将画布涂成一个颜色，然后建立一个矩形，将画布以矩形进行裁剪，最后将裁剪出的矩形画布图上另一种颜色，以便观察，代码如下：
```
        //将整屏画布刷成蓝色
        canvas.drawColor(Color.BLUE);
        //建立要裁剪的矩形
        Rect rect=new Rect();
        rect.set(100,100,200,200);
        //按矩形大小裁剪画布
        canvas.clipRect(rect);
        //将裁剪的画布涂成红色
        canvas.drawColor(Color.RED);
```
运行效果如下图：
![image.png](/contentImages/image/jianshu/6127340-d6f3a88788e7372d.png)
####三.Canvas的保存于恢复
鉴于canvas的平移，裁剪等是不可逆的，但是我们又需要使用到平移或裁剪之前的画布效果，这时，我们就需要用到canvas的保存和修复了，两方法如下：
```
        //保存当前画布
        canvas.save();
        //恢复之前的画布
        canvas.restore();
```
为了方便大家理解，这里我们做些操作，第一步，将画布刷成蓝色并保存，代码如下：
```
        //将整个画布刷成蓝色
        canvas.drawColor(Color.BLUE);
        //保存当前画布
        canvas.save();
```
运行效果如下：
![image.png](/contentImages/image/jianshu/6127340-4d3437445cc09a01.png)

接着在蓝色画布上裁剪出一个矩形画布，并将矩形画布的颜色涂成绿色，运行代码如下：
```
        //裁剪画布
        Rect rect=new Rect(100,100,200,200);
        canvas.clipRect(rect);
        //将裁剪的画布涂成绿色
        canvas.drawColor(Color.GREEN);
```
效果图如下：
![image.png](/contentImages/image/jianshu/6127340-ab4c6dc038b296ad.png)
最后，我们将画布恢复成上次保存的样子，然后将整个画布涂成红色，代码如下：
```
        //恢复之前的画布
        canvas.restore();
        //将新画布涂成红色
        canvas.drawColor(Color.RED);
```
最后出现的效果如下:
![image.png](/contentImages/image/jianshu/6127340-4960b08850838dc0.png)

所有操作都集中在自定义控件 CanvasView 代码中，这里给出下CanvasView在MainActivity对应的布局 activity_main.xml中的调用：
```
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

<com.testdemo.function.CanvasView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>
```
####四.项目结构图
![image.png](/contentImages/image/jianshu/6127340-9ad562e7f9fe1967.png)

ok，今天的关于canvas对于画布本身的操作的一些基本内容就讲到这里了，谢谢大家

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

Canvas的平移，裁剪，保存及恢复

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子