Android 高階UI9 Canvas save和restore例項解析

南方吳彥祖_藍斯發表於2021-09-28

自己定義控制元件時經常遇到重寫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);
   }
}
複製程式碼

Android 高階UI9 Canvas save和restore例項解析


        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);
複製程式碼

Android 高階UI9 Canvas save和restore例項解析

我們發現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);
複製程式碼

Android 高階UI9 Canvas save和restore例項解析


        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);
複製程式碼

Android 高階UI9 Canvas save和restore例項解析

結論:畫板是以棧的形式進行儲存
搜尋動畫實際案例

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 高階UI9 Canvas save和restore例項解析

更多Android技術分享可以關注@我,也可以加入QQ群號:1078469822,學習交流Android開發技能。

作者:冬日毛毛雨

來源:掘金

著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69983917/viewspace-2794283/,如需轉載,請註明出處,否則將追究法律責任。

相關文章