Canvas之translate、scale、rotate、skew方法讲解！

最新推荐文章于 2024-09-13 13:58:50 发布

置顶

GAStudio

最新推荐文章于 2024-09-13 13:58:50 发布

阅读量7.1w

点赞数 63

分类专栏： android动效篇文章标签： Canvas android画布 canvas.translate canvas.scale canvas.rotate

本文链接：https://blog.csdn.net/tianjian4592/article/details/45234419

版权

本文详细介绍了Canvas的translate、scale、rotate、skew方法，通过实例展示了如何使用这些方法进行画布的平移、缩放、旋转和错切。通过绘制刻度尺、旋转效果和错切效果，帮助读者深入理解这些方法的用法及其在实际绘制中的应用。

摘要由CSDN通过智能技术生成

尊重原创，欢迎转载，转载请注明： FROM GA_studio http://blog.csdn.net/tianjian4592

前面说Canvas大致可以分为三类：

1. save、restore 等与层的保存和回滚相关的方法；

2. scale、rotate、clipXXX 等对画布进行操作的方法；

3. drawXXX 等一系列绘画相关的方法；

前面主要讲了drawBitmap方法，并举了一个星球浮动的栗子，在那个例子中，星球有大有小，需要移动，有时候可能需求上还需要旋转或错切，有了这些需求，我们就需要使用到与Canvas相关的translate、scale、rotate、skew这几个方法，平移、缩放、旋转、错切,这四个词听起来是如此的熟悉，我们在做一些基本动画的时候经常会与这几个词打交道，现在我们一个个看下当把这几个家伙和Canvas（画布）结合能产生什么效果;

当然在看之前得先明确两个基本概念：

1.Canvas 的左上角是（0，0）；

2.基于左上角往右 X 为正，往下 Y 为正，反之为负；

一、canvas.translate() －画布的平移：

首先咱们在画布上画一个400 X 400 红色的矩形

canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);

此时整个画布的左上角出现了一个红色的矩形（为了更清楚，蓝色打个底）该矩形大小为400 X 400 ，效果如下：

接下来我们canvas.translate( )玩玩

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLUE);
        canvas.translate(100, 100);
        canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);
    }

看下效果：

此时可以看到，虽然是绘制同样的矩形，但矩形在画布上的位置已经向右和向下各移动了100px；

既然如此，这个时候如果我们再将canvas 平移（translate）（100，100），再绘制一个同样的矩形会出现什么情况呢？会与之前的矩形重叠吗？咱们拭目以待：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLUE);
        canvas.translate(100, 100);
        canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);
        canvas.translate(100, 100);
        canvas.drawRect(new Rect(0, 0, 400, 400), mPaint);
    }

从效果上看，两次translate 进行了叠加，绘制第二个矩形的时候画布已经偏移了（200，200）；

好了，了解到这里，咱们利用canvas.translate( )一起来做个小栗子，绘制一个生活中比较常用的刻度尺；

咱们先从网上找个用于参考的刻度尺图片：

从图上看，刻度尺的元素有：外框、刻度线（不同的数值刻度线长短不一）、数字

所以我们所要做的就是对上面的元素在onDraw里分别绘制：

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制外框
        drawOuter(canvas);
        // 绘制刻度线
        drawLines(canvas);
        // 绘制数字
        drawNumbers(canvas);
    }

咱们先简单分析一下，刻度尺有个外框，外框距离左右都有一定的边距，第一根和最后一根刻度线距离边框也有一定的边距，其余刻度线之间距离相同，另外一些特殊的刻度线长短不一；