ITPub博客

首页 > 移动开发 > ANDROID > Android 高级UI9 Canvas save和restore实例解析

Android 高级UI9 Canvas save和restore实例解析

ANDROID 作者:南方吴彦祖_蓝斯 时间:2021-09-28 20:25:20 0 删除 编辑

自己定义控件时经常遇到重写View的draw()方法,draw()方法经常设计到save()和restore()这两个方法.这两个相互匹配出现的,作用是用来保存画布的状态和取出保存的状态的。

save():用来保存canvas的状态,save()方法之后的代码,能够调用canvas的平移、放缩、旋转、裁剪等操作! restore():用来恢复canvas之前保存的状态,防止save()方法代码之后对canvas运行的操作。继续对兴许的绘制会产生影响。通过该方法能够避免连带的影响!


public class MyView extends View {


   public MyView(Context context) {
       super(context);
   }

   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       canvas.drawColor(Color.GREEN);
       //canvas变换操作不会对前面造成影响
       canvas.clipRect(new Rect(100, 200, 500, 500));
       canvas.drawColor(Color.BLUE);
   }
}
复制代码


        canvas.drawColor(Color.GREEN);

       //canvas变换操作不会对前面造成影响
       canvas.clipRect(new Rect(100, 200, 500, 500));
       canvas.drawColor(Color.BLUE);

       Paint paint = new Paint();
       paint.setColor(Color.RED);
       canvas.drawCircle(200,200,500,paint);
复制代码

我们发现canvas裁剪产生的画布,绘制,不会对非裁剪的区域造成影响。

        canvas.drawColor(Color.GREEN);

       //保存画布当前的状态(保存到画布栈里面了)
       canvas.save();
       //canvas变换操作不会对前面造成影响
       canvas.clipRect(new Rect(100, 100, 500, 500));
       canvas.drawColor(Color.BLUE);
       //恢复画布
       canvas.restore();
       Paint paint = new Paint();
       paint.setColor(Color.RED);
       canvas.drawCircle(100, 100, 100, paint);
复制代码


        canvas.drawColor(Color.GREEN);

       //保存画布当前的状态
       canvas.save();
       //canvas变换操作不会对前面造成影响
       canvas.clipRect(new Rect(100, 100, 500, 500));
       canvas.drawColor(Color.BLUE);
       canvas.save();
       //恢复画布
       //canvas.restore();
       Paint paint = new Paint();
       paint.setColor(Color.RED);
       canvas.drawCircle(100, 100, 100, paint);
       canvas.restore();
       paint.setColor(Color.YELLOW);
       canvas.drawCircle(150,150,100,paint);
复制代码

结论:画板是以栈的形式进行存储
搜索动画实际案例

public abstract class BaseController {


   public static final int STATE_ANIM_NONE = 0;
   public static final int STATE_ANIM_START = 1;
   public static final int STATE_ANIM_STOP = 2;
   public static final int DEFAULT_ANIM_TIME = 5000;
   public static final float DEFAULT_ANIM_STARTF = 0;
   public static final float DEFAULT_ANIM_ENDF = 1;
   private MySearchView mySearchView;
   public int mState = STATE_ANIM_NONE;

   public abstract void draw(Canvas canvas,Paint paint);

   public void startAnim(){

   }

   public void resetAnim(){

   }

   public int getWidth(){
       return mySearchView.getWidth();
   }
   public int getHeight(){
       return mySearchView.getHeight();
   }

   public void setSearchView(MySearchView mySearchView){
       this.mySearchView = mySearchView;
   }

   public float mpro = -1;
   public ValueAnimator startViewAnimation(){
       ValueAnimator valueAnimator = ValueAnimator.ofFloat(0,1);
       valueAnimator.setDuration(800L);
       valueAnimator.setInterpolator(new LinearInterpolator());
       valueAnimator.addUpdateListener(new AnimatorUpdateListener() {

           @Override
           public void onAnimationUpdate(ValueAnimator animation) {
               mpro = (float) animation.getAnimatedValue();
               mySearchView.invalidate();
           }
       });

       valueAnimator.start();
       mpro = 0;
       return valueAnimator;
   }
}
复制代码

绘制类


public class Controller1 extends BaseController {


   private String mColor = "#4CAF50";
   private int cx, cy, cr;
   private RectF mRectF;
   private int j = 15;

   public Controller1() {
       mRectF = new RectF();
   }

   @Override
   public void draw(Canvas canvas, Paint paint) {
       canvas.drawColor(Color.parseColor(mColor));
       switch (mState) {
           case STATE_ANIM_NONE:
               drawNormalView(paint, canvas);
               break;
           case STATE_ANIM_START:
               drawStartAnimView(paint, canvas);
               break;
           case STATE_ANIM_STOP:
//              drawNormalView(paint, canvas);
               drawStopAnimView(paint, canvas);
               break;
       }
   }

   private void drawStopAnimView(Paint paint, Canvas canvas) {
   }

   private void drawStartAnimView(Paint paint, Canvas canvas) {
       canvas.save();
       //0~1
       if (mpro <= 0.5f) {
           /**
            * 绘制圆和把手
            */

           /**
            *
            * -360 ~ 0 需要变换的范围
            * 0 ~ 0.5  实际的变化范围
            * 转换公式:360*(mpro*2-1)
            */
           canvas.drawArc(
                   mRectF,
                   45,
                   360 * (mpro * 2 - 1),
                   false,
                   paint);
           canvas.drawLine(
                   mRectF.right - j,
                   mRectF.bottom - j,
                   mRectF.right + cr - j,
                   mRectF.bottom + cr - j,
                   paint);
       } else {
           /**
            * 绘制圆和把手
            */
           canvas.drawLine(
                   mRectF.right - j + cr * (mpro * 2 - 1),
                   mRectF.bottom - j + cr * (mpro * 2 - 1),
                   mRectF.right - j + cr,
                   mRectF.bottom + cr - j,
                   paint);
       }
       canvas.drawLine(
               (mRectF.right - j + cr) * (1 - mpro * 0.8f),
               mRectF.bottom + cr - j,
               mRectF.right - j + cr,
               mRectF.bottom + cr - j,
               paint);
       canvas.restore();

       mRectF.left = cx - cr + mpro * 250;
       mRectF.right = cx + cr + mpro * 250;
       mRectF.top = cy - cr;
       mRectF.bottom = cy + cr;

   }

   private void drawNormalView(Paint paint, Canvas canvas) {
       cr = getWidth() / 20;
       cx = getWidth() / 2;
       cy = getHeight() / 2;

       mRectF.left = cx - cr;
       mRectF.right = cx + cr;
       mRectF.top = cy - cr;
       mRectF.bottom = cy + cr;

       canvas.save();
       paint.reset();
       paint.setAntiAlias(true);
       paint.setColor(Color.WHITE);
       paint.setStrokeWidth(5);
       paint.setStyle(Paint.Style.STROKE);

       canvas.rotate(45, cx, cy);
       canvas.drawLine(cx + cr, cy, cx + cr * 2, cy, paint);

//        canvas.drawArc(
//                mRectF,
//                0,         //起始角度,相对X轴正方向
//                360,       //画多少角度的弧度
//                false,     //boolean,false :只用一个弧度线;true:闭合的边
//                paint);
//        canvas.restore();
       canvas.drawArc(
               mRectF,
               0,
               360,
               false,
               paint);
       canvas.restore();
   }

   @Override
   public void startAnim() {
       super.startAnim();
       mState = STATE_ANIM_START;
       startViewAnimation();
   }

   @Override
   public void resetAnim() {
       // TODO Auto-generated method stub
       super.resetAnim();
       mState = STATE_ANIM_STOP;
       startViewAnimation();
   }
}
复制代码

public class MySearchView extends View {


   private Paint mPaint;
   private BaseController mController;

   public MySearchView(Context context) {
       super(context);
   }

   public MySearchView(Context context,
           @Nullable AttributeSet attrs) {
       super(context, attrs);
       init();

   }

   private void init() {
       mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
       mPaint.setStrokeWidth(5);
   }

   public void setController(BaseController controller) {
       this.mController = controller;
       mController.setSearchView(this);
       invalidate();

   }

   @Override
   protected void onDraw(Canvas canvas) {
       super.onDraw(canvas);
       mController.draw(canvas,mPaint);
   }

   public void startAnimation(){

       if(mController!=null){
           mController.startAnim();
       }
   }

   public void resetAnimation(){
       if(mController!=null){
           mController.resetAnim();
       }
   }
}
复制代码

public class MainActivity extends AppCompatActivity {


   private MySearchView searchView;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       searchView = (MySearchView) findViewById(R.id.sv);
       searchView.setController(new Controller1());
   }

   public void start(View view) {
       searchView.startAnimation();
   }

   public void reset(View view) {
       searchView.resetAnimation();
   }
}
复制代码

更多Android技术分享可以关注@我,也可以加入QQ群号:1078469822,学习交流Android开发技能。

作者:冬日毛毛雨

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69983917/viewspace-2794283/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论
不定期分享自己开发几年来收录整理的几十套腾讯、头条、阿里、美团等公司19年的面试题,其中把技术点整理成了视频和PDF,包含知识脉络 + 诸多细节,获取这些安卓资料请加 WX:X1524478394

注册时间:2020-09-15

  • 博文量
    156
  • 访问量
    92624