Android自定义View-------Canvas动画的误解-白红宇

前言

最近在看自定义View方面的知识，遇到下面一段代码，由于对旋转后的绘图存在疑问，经过多方求证，最后弥补了操作Canvas（旋转，平移等）认知的错误，并得出正确结论：

动画操作Canvas，其实操作的是临时坐标系，对于已经绘制的图形部分无效

下面详细记录求证过程，以备同仁指正：

建议大家按照代码绘制看看，绘制对的可以留言，绘制错了也可以留言，这篇博客让你理解了吗？

/**     * 在画布的 左下角画圆，     * 中间画向右箭头 ：旋转画布后再画     * 右上角画圆：画布旋转为原始方向后再画     * @param canvas     */    private void canvasTest(Canvas canvas) {        int width = 200;        int height = 200;        int radius = 10;        int centerX = radius;        int centerY = height - radius;        Paint paint = new Paint();        //画做左下角的圆        paint.setStyle(Paint.Style.FILL);        paint.setColor(Color.BLUE);        paint.setAntiAlias(true);        canvas.drawCircle(centerX, centerY, radius, paint);        // 1.-------------------------------------------------------------       canvas.save();       canvas.rotate(90, width/2, height/2);   //以画布中心为旋转点//      canvas.translate(0, -30);//      canvas.scale(1.2f, 1.2f, width/2, height/2);        paint.setColor(Color.RED);        paint.setStyle(Paint.Style.STROKE);        paint.setStrokeWidth(4);        //左线、右线、中线， 把旋转后的当做新画布，但x, y 的坐标仍是原来方向的，但画出的图是旋转后的        //可以想象为先在原始画布上画，画好后旋转        canvas.drawLine(width/2, 0, 0, height/2, paint);        canvas.drawLine(width/2, 0, width, height/2, paint);        canvas.drawLine(width/2, 0, width/2, height, paint);        // 2.----------------------------------------------------        canvas.restore();  //如果不加这一行，那么下面的那个右上角的圆是 旋转后的画布的右上角，而非原始画布的右上角位置        //右上角画个圆        int cx2 = width - radius;        int cy2 = radius;        paint.setStyle(Paint.Style.FILL);        paint.setColor(Color.RED);        canvas.drawCircle(cx2, cy2, radius, paint);    }复制代码

上述的代码在我求证之初，我得出的图形是这样的：

既然是错误的，就不多解释了，免得误导大家。

下面是正确的绘图结果：

对比错误的和正确的绘图，不难发现三点差异：

第一：坐标系差异（这是个隐形的差异）；

第二：旋转前绘制的圆的差异（旋转前绘制的圆到底该不该跟随Canvas旋转，为什么跟随旋转的是错的呢？）

第三：最后一个圆的差异（这个差异其实是因为第一个原因坐标系的差异导致的）；

接下来我们就对这三个差异一一解释：

先说第二个，旋转前绘制的圆的差异？

这个问题的原因就是我在最前面所说的：旋转Canvas时，其实旋转的是临时的坐标系，只对旋转后的图形有效，对旋转前的绘图无效。

接下来说第一个差异，最后一个圆绘制在canvas.restore()后面,此时的坐标系还是旋转后的坐标系吗?

答案是NO! canvas.restore()方法和canvas.save()方法，细心的朋友可以发现，我在前面特别表示了这两个方法的位置，canvas.save()写在旋转之前，canvas.restore()方法就是将坐标系恢复到sava方法调用的地方，所以他们是成双成对出现的。

总结

动画操作Canvas，其实操作的是临时坐标系，对于已经绘制的图形部分无效。而Canvas.restore方法等于是将Canvas动画操作还原成Save时的状态

你对这个容易误解的知识点掌握了吗？