Canvas&Paint[]Canvas：Matrix、Clip、Save&Restore

最新推荐文章于 2022-12-14 10:55:12 发布
原创 最新推荐文章于 2022-12-14 10:55:12 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了Canvas中的坐标系变换方法，包括平移、旋转、缩放和斜切等操作，并展示了如何利用这些变换来简化复杂的绘图任务，如绘制时钟刻度等。

【参考链接】

群英传

canvas变换与操作http://blog.youkuaiyun.com/harvic880925/article/details/39080931

 

Matrix

前面说过，画布坐标系的初始状态是，坐标系的原点在画布的左上角。

但是有时候，为了绘图的方便，需要变换画布坐标系。

 


 

提供了如下函数来变换画布坐标系

当变换了画布坐标系以后，后面的draw()函数中的坐标都是对应于最新的画布坐标系。

 

translate(floatdx, float dy)

//平移
canvas.translate(200,200);

paintAll.setColor(Color.parseColor("#FF0000"));
canvas.drawRect(0,0,300,300,paintAll);


rotate(floatdegrees)

rotate(floatdegrees, float px, float py)

//绕(300, 300)旋转45度
canvas.rotate(45,300,300);
paintAll.setColor(Color.parseColor("#FF0000"));
canvas.drawRect(0,0,300,300,paintAll);


 

scale(floatsx, float sy)//如果坐标系拉伸了2倍，则变换后的300相当于是之前的600

scale(floatsx, float sy, float px, float py)

//坐标系放大两倍//新的300相当于之前的600
canvas.scale(2,2);
paintAll.setColor(Color.parseColor("#FF0000"));
canvas.drawRect(0,0,300,300,paintAll);


skew(floatsx, float sy)

//斜切//X轴倾斜60度，Y轴不变
canvas.skew(1.732f,0);
paintAll.setColor(Color.parseColor("#FF0000"));
canvas.drawRect(0,0,300,300,paintAll);


concat(Matrixmatrix)

//使用矩阵平移
Matrix matrix=newMatrix();
matrix.setValues(new float[]{1.0f,0,200,
                                               0,1.0f,200,
                                               0,0,1});
canvas.concat(matrix);


 

通过这些函数，可以方便的画出时钟刻度这样的图

 


 

protected voidonDraw(Canvas canvas) {
    //获取宽高参数
    mWidth= getMeasuredWidth();
    mHeight= getMeasuredHeight();

    int strokeWidth=5;
    //画外圆
    Paint paintCircle =newPaint();
    paintCircle.setStyle(Paint.Style.STROKE);
    paintCircle.setAntiAlias(true);
    paintCircle.setStrokeWidth(strokeWidth);
    canvas.drawCircle(mWidth/2,
           mHeight/2,mWidth/2-strokeWidth,paintCircle);

    //画刻度//每次画的都是坐标系上方中间的刻度
    canvas.save();
    Paint painDegree =newPaint();
    paintCircle.setStrokeWidth(3);
    for (inti =0;i <24;i++) {
       //区分整点与非整点
       if(i ==0|| i ==6|| i ==12|| i ==18) {
           painDegree.setStrokeWidth(5);
           painDegree.setTextSize(30);
           canvas.drawLine(mWidth/2,
                   mHeight/2-mWidth/2+strokeWidth,
                   mWidth/2,
                   mHeight/2-mWidth/2+strokeWidth +60,
                   painDegree);

           String degree =String.valueOf(i);
           canvas.drawText(degree,
                   mWidth/2- painDegree.measureText(degree) /2,
                   mHeight/2-mWidth/2+strokeWidth +90,
                   painDegree);

       }else{
           painDegree.setStrokeWidth(3);
           painDegree.setTextSize(15);
           canvas.drawLine(mWidth/2,
                   mHeight/2-mWidth/2+strokeWidth,
                   mWidth/2,
                   mHeight/2-mWidth/2+strokeWidth+30,
                   painDegree);
           String degree =String.valueOf(i);
           canvas.drawText(degree,
                   mWidth/2- painDegree.measureText(degree) /2,
                   mHeight/2-mWidth/2+strokeWidth+60,
                   painDegree);
       }
       //通过旋转画布简化坐标运算//将画布坐标系顺时针旋转15度
       canvas.rotate(15,mWidth/2,mHeight/2);
    }
    canvas.restore();

    //画圆心
    Paint paintPointer =newPaint();
    paintPointer.setStrokeWidth(30);
    canvas.drawPoint(mWidth/2,mHeight/2,paintPointer);

    //画指针
    Paint paintHour =newPaint();
    paintHour.setStrokeWidth(20);
    Paint paintMinute =newPaint();
    paintMinute.setStrokeWidth(10);
    canvas.translate(mWidth/2,mHeight/2);
    canvas.drawLine(0,0,100,100,paintHour);
    canvas.drawLine(0,0,100,200,paintMinute);
}

 

Clip

还可以使用clip()函数来圈定一块区域，设置了clip()以后，后面的draw()只有落在这个区域中才会绘制出来

可以使用Rect、Path、Region来指定这块区域


paintAll.setColor(Color.parseColor("#0000FF"));
canvas.drawRect(0,0,300,300,paintAll);

//使用矩阵平移
Matrix matrix=newMatrix();
matrix.setValues(new float[]{1.0f,0,200,
                                               0,1.0f,200,
                                               0,0,1});
canvas.concat(matrix);
printMatrix(matrix);
//画布坐标系原点在界面原点的(200, 200)

//在当前画布坐标系下，截取区域
canvas.clipRect(100,100,300,300);
Log.e("shadowfaxghh","clip = "+canvas.getClipBounds().toString());//这个值是相对于当前Matrix的
canvas.drawColor(Color.parseColor("#0000FF"));

//坐标系依然是上面的坐标系
paintAll.setColor(Color.parseColor("#FF0000"));
canvas.drawRect(200,200,300,300,paintAll);

canvas.translate(100,100);
Log.e("shadowfaxghh","clip = "+canvas.getClipBounds().toString());//这个值是相对于当前Matrix的
//所以并没有改变clip，但是输出变了

ImageView iv =(ImageView) findViewById(R.id.iv);
iv.setImageBitmap(bmp);



 

Save&Restore

在应用了Matrix和Clip以后，如何复原呢，可以借助于save()和restore()两个函数


save()记录下当前的画布坐标系的状态

saveLayer()/saveLayerAlpha()记录下当前的画布坐标系的状态，并且在当前图层上方新建一个无背景图层，后续的绘图都是在新建的图层上。可以指定图层的透明度。

 


restore()恢复到上一次保存时的状态。如果上次保存状态后还创建了新的图层，即saveLayer()，也会回到上一次时所在的图层。

 

save()的时候还可以设置记录下哪些信息，恢复的时候只会恢复记录的信息。

save()/saveLayer()会返回一个count，可以使用restoreToCount()直接恢复到该count时的状态。

 

save

       Bitmap bmp=Bitmap.createBitmap(800,800,Bitmap.Config.ARGB_8888);//创建一个1000的画布
       Canvas canvas=newCanvas(bmp);

       //默认画笔
       Paint paintAll=newPaint();
       paintAll.setAlpha(255);//不透明度//完全不透明
       paintAll.setAntiAlias(true);

       paintAll.setStyle(Paint.Style.STROKE);
       paintAll.setStrokeWidth(2);

       paintAll.setColor(Color.parseColor("#000000"));
       canvas.drawRect(0,0,300,300,paintAll);
       canvas.clipRect(0,0,700,700);//clip//相当于界面原点的（0,0 ~ 700,700）

//       int saveFlags = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG
//               | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
//               | Canvas.CLIP_TO_LAYER_SAVE_FLAG;
       intsaveFlags = Canvas.MATRIX_SAVE_FLAG;
       int save =canvas.save(saveFlags);//只保存了matrix信息
       showMatrixAndClip(canvas);

       //先平移
       canvas.translate(300,300);
       canvas.drawRect(0,0,300,300,paintAll);
       canvas.clipRect(0,0,300,300);//clip发生了改变//相当于界面原点的(300,300, 600, 600)

       canvas.save();
       showMatrixAndClip(canvas);

       //再旋转
       canvas.rotate(45);
       canvas.drawRect(0,0,300,300,paintAll);

       //回到save时保存的状态//因为当时只保存了Matrix，所以只会还原Matrix
       //不会影响clip，clip仍然是界面原点的(300, 300, 600, 600)
       canvas.restoreToCount(save);
       showMatrixAndClip(canvas);

       canvas.drawRect(0,0,100,100,paintAll);



saveLayer

Bitmap bmp=Bitmap.createBitmap(800,800,Bitmap.Config.ARGB_8888);
Canvas canvas=newCanvas(bmp);

//默认画笔
Paint paintAll=newPaint();
paintAll.setAlpha(255);//不透明度//完全不透明
paintAll.setAntiAlias(true);

paintAll.setStyle(Paint.Style.STROKE);
paintAll.setStrokeWidth(2);

//最初的图层//第一个图层
paintAll.setColor(Color.BLUE);
canvas.drawCircle(100,100,100,paintAll);

canvas.translate(-100,-100);

//保存当前的坐标系状态(-100, -100)
//在上面创建一个新的图层//在新的图层上绘制//第二个图层
//图层所在的位置是当前坐标系的(300, 300, 500, 500)
intLAYER_FLAGS = Canvas.MATRIX_SAVE_FLAG|
               Canvas.CLIP_SAVE_FLAG|
               Canvas.HAS_ALPHA_LAYER_SAVE_FLAG|
               Canvas.FULL_COLOR_LAYER_SAVE_FLAG|
               Canvas.CLIP_TO_LAYER_SAVE_FLAG;

canvas.saveLayerAlpha(300,300,500,500,128);
canvas.drawColor(Color.BLUE);
canvas.translate(300,300);//改变坐标系
canvas.drawRect(0,0,100,100,paintAll);
canvas.restore();//恢复到上次保存时的坐标系，即回到(-100, -100)，并回到第一个图层

//保存当前的坐标系状态
//再创建一个图层//第三个图层
canvas.saveLayer(400,400,600,600,paintAll,LAYER_FLAGS);
canvas.drawColor(Color.RED);
canvas.restore();


创建图层的时候需要注意

如果要在新图层上再新建一个图层，不能连续调用两次saveLayer，必须像上方代码一样saveLayer()->restore()->saveLayer()

 

ShadowfaxGHH
关注
Android高级进阶——绘图篇（八）Canvas与图层（二）
AkaiC的博客
04-26 2348
一、FLAG的具体意义 1、FLAG概述 有关save系列函数，在canvas中总共有如下几个： public int save() public int save(int saveFlags) public int saveLayer(RectF bounds, Paint paint, int saveFlags) public int saveLayer(f...
绘制系列（十六）-Canvas与图层二
Leslie_LN的博客
12-26 682
Canvas涉及的flag讲解 上一篇博客，我们说到canvas的六个flag，这里简单的演示六个flag的作用。这里有个问题，一下演示在Addriod6.0以下的手机上有效果，在6.0的手机上失效，不知道是什么原因。知道可以在下面评论给我说说… save（int flags）、saveLayer(int flags)都可以设置标志位，All_save_flag、matrix_save_flag...
canvas的save restore clipRect方法解析
10-14 974
之前对canvas的这几个方法一直不是很清楚，今天花点时间总算搞明白了。   1.save restore方法成对出现，用于保存恢复画布canvas,比如需要临时rotate canvas来画一些东西，画完之后再rotate回来画其它东西，这时就可以用这个兄弟   2.cliprect方法，用于将画布切割到指定区域大小来作画，一般需要save restore方法保存恢复画布
HTML5 canvas 之 clip
水丸的博客
08-03 3251
今天学习HTML5 canvas clip() 方法时，发现其几乎都要与save()与restore()方法嵌套使用，不这样效果又达不到期望，故自己做了一下一些尝试，以加深理解。   1. 主要代码及效果图如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="...
Canvas的save()和restore()以及clipRect()方法测试
谷哥的小弟
06-11 3357
MainActivity如下: package cn.testcanvas; import android.os.Bundle; import android.widget.ImageView; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; i
Canvas的clip方法的使用
kunluo的博客
04-11 1895
canvas 还提供裁剪的功能。  裁剪功能由Canvas提供的一系列的clip...方法 和quickReject方法来完成。 前面已经提到，真正提供可绘制区域的是Canvas内部的mutable bitmap。 Canvas更像是一个图层，我们只能在这上面的图层来绘制东西。 1、首先介绍Region类 Region，中文意思即区域的意思，它表示的是canvas图层上的某一块封
Canvas: canvas的save()和restore()
qq_36113746的博客
12-14 1306
Canvas的save()和restore()方法
Android Canvas绘图技术：save和restore方法解析
### 知识点：Android Canvas save restore 演示 #### 标题解析 标题为“Android Canvas save restore演示”，直接指向了Android开发中图形绘制方面的具体技术点——Canvas的save()和restore()方法。在Android平台...
android中canvas的save和restore用法
02-19
`Canvas`的状态包括但不限于绘图矩阵（Matrix）、剪裁区域（Clip）和层叠效果（SaveLayer）。当我们调用`save()`时，`Canvas`会将当前的所有绘图状态记录下来，生成一个状态快照。这个状态快照可以用来恢复到之前的...
android 中canvas的save和resotre用法
02-19
`save()`方法用于保存当前Canvas的状态，这个状态包括了当前的绘图矩阵（Matrix）、剪裁区域（Clip Region）以及绘图选项（如颜色模式、抗锯齿设置等）。调用`save()`会返回一个整数值，这个值代表了保存的状态栈中...
Canvas中的剪切clip()方法
weixin_33916256的博客
12-26 593
Canvas中的剪切 接下来我们要聊的不是图像的合成，而是Canvas中的另一个有用的功能：剪切区域。它是Canvas之中由路径所定义的一块区域，浏览器会将所有的绘图操作都限制在本区域内执行。在默认情况下，剪辑区域的大小与Canvas画布大小一致。除非你通过创建路径并调用Canvas绘图环境对象的clip()方法来显式的设定剪辑区域，否则默认的剪辑区域不会影响Canvas之中所绘制的内容。然而，...
《canvas》之第11章 canvas状态
yxqq378287007的博客
06-27 249
canvas 状态
Canvas.CLIP_SAVE_FLAG 找不到
丿灬安之若死
09-19 536
改为 canvas.save();
Android绘图之Canvas状态保存和恢复（7）
lidongxiu0714
12-21 7968
1 Canvas 状态保存和恢复 前面讲canvas概念理解时 已经讲解了save和savelayer，saveLayerAlpha函数，这里进行canvas状态保存和恢复的详细讲解。 Canvas 调用了translate,scale,rotate,skew,concat or clipRect等变换后，后续的操作都是基于变换后的Canvas，都会受到影响，对于后续的操作很不方便。 Canvas...
Numpy 中clip函数的使用
热门推荐
qq1483661204的博客
10-02 15万+
Numpy 中clip函数的使用numpy.clip(a, a_min, a_max, out=None)[source]其中a是一个数组，后面两个参数分别表示最小和最大值，怎么用呢，老规矩，我们看代码：import numpy as np x=np.array([1,2,3,5,6,7,8,9]) np.clip(x,3,8) Out[88]: array([3, 3, 3, 5, 6, 7, 8
[Android Studio 日常奇怪问题记录] 之canvas.save(Canvas.ALL_SAVE_FLAG)
u010117864的专栏
04-11 1万+
canvas.save(Canvas.ALL_SAVE_FLAG); 在androidP上会报错，修改方法： canvas.save(Canvas.ALL_SAVE_FLAG); --> canvas.save();
自定义控件（10）---Canvas的save、restore方法的Stack思想
全干工程师
11-11 3234
save和saveLayerXXX方法有着本质的区别，saveLayerXXX方法会将所有操作在一个新的Bitmap中进行，而save则是依靠stack栈来进行 如果在上一篇博客里面的自定义view修改下onDraw方法，其他不变 @Override protected void onDraw(Canvas canvas) { /* * 保存并裁剪画布填充绿色 */
API28找不到Canvas变量
lareinax5的博客
12-03 1050
目前在api28中 找不到 canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP...
Android canvas.save(Canvas.CLIP_SAVE_FLAG) 找不到CLIP_SAVE_FLAG
shenggaofei的博客
08-27 6391
这是API28时候调用出现的情况，可以直接修改写法： canvas.save(Canvas.CLIP_SAVE_FLAG); 改为： canvas.save(); 相关文档：https://developer.android.com/sdk/api_diff/28/changes/android.graphics.Canvas 涉及到的自定义类： package com.exam...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值