Canvas 中 concat 与 setMatrix

Canvas 中 concat 与 setMatrix

最近在学习Android自定义View，途中遇见一些小问题，所以记录一下。
可能理解有所不足，请仅做参考

个人认为要认识这两个API的区别，最好的方式就是实践啦，所以直接贴出效果图与代码。

仅仅只使用 concat 或 setMatrix 的效果

紫色(0xffc44187) 绘制的是原始 图形
而红色(Color.RED) 绘制的是使用 concat 或 setMatrix 后的效果

无论你是 使用 concat 或 setMatrix ，效果是一毛一样的

对应代码如下

public class Matrix53View extends View
{

    Matrix mMatrix = new Matrix();

    public Matrix53View(Context context)
    {
        super(context);
        mMatrix.setScale(2f, 2f);
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(10);
        paint.setColor(0xffc44187);

        //绘制 圆心
        canvas.drawPoint(100, 100, paint);
        //绘制 圆
        canvas.drawCircle(100, 100, 100, paint);

        //用黑色 绘制 放大 0.9倍
        paint.setColor(Color.BLACK);
        canvas.drawPoint(190, 190, paint);

        //使用矩阵放大一倍
        canvas.concat(mMatrix);
        //canvas.setMatrix(mMatrix);

        //按部就班
        paint.setColor(Color.RED);
        canvas.drawCircle(100, 100, 100, paint);
        canvas.drawPoint(100, 100, paint);
    }
}

简单讲一下代码
1. 首先创建 Matrix 对象 ，然后进行放大一倍setScale(2f, 2f)。
2. 在onDraw方法中首先在 坐标A(100,100) 绘制一个点(drawPoint)，然后根据这个点绘制一个半斤为 100 的圆(drawCircle)
3. 在点B(190,190)处在绘制一个点，用来观察使用concat 或 setMatrix 后的效果
4. 使用concat 或 setMatrix 进行放大
5. 最后按照 2 的步骤在来一次

然后我们发现使用concat 或 setMatrix 之后，明明是在点 A(100,100) 画的 点与圆，最后成功的跑到 点c(200,200)去了 。

如果我们将 concat 执行两次

代码是这样的

    @Override
    protected void onDraw(Canvas canvas)
    {
        //... 根据上面代码进行修改
        //用黑色 绘制 放大 0.9倍
        paint.setColor(Color.BLACK);
        //绘制线，方便观察规律
        canvas.drawLine(0,0,400, 400, paint);

        //使用矩阵放大一倍
        canvas.concat(mMatrix);
        canvas.concat(mMatrix);
        //canvas.setMatrix(mMatrix);

        //...
    }

效果是这样的

这里我把
canvas.drawPoint(190, 190, paint);
换成了
canvas.drawLine(0,0,400, 400, paint);
可以更好的理解。

就和代码中画的那条线一样，圆心的点(100,100)的放大到了 点(400,400)处。也就是放大了两个 mMatrix,(100*2*2,100*2*2)。

使用 setMatrix

如果我们多次使用 concat 后，在使用 setMatrix,会怎么样？
会继续放大吗？
好奇吗？
那就让代码来告诉我们答案

    @Override
    protected void onDraw(Canvas canvas)
    {
        //... 在上面代码的基础上进行修改

        for (int i = 0; i < 100; i++)
        {
            canvas.concat(mMatrix);
        }
        canvas.setMatrix(mMatrix);

        //...
    }

最终代码效果是这样的

也就是说， Canvas 中的 Matrix 之前无论变成了啥样，最终一个 setMatrix 都能让他会回到解放前。

最后

关于 concat 与 setMatrix 的区别，就自己理解吧 ~ [偷笑.png]

参考文献

android学习7——canvas.concat(Matrix matrix)作用
Android UI学习|对Canvas和Matrix的理解