1. When you finish the work of onMeasure and onLayout in the custom control, it's time to draw the control. Sometimes you need to add some modifications on the control to meet your needs.
Overwrite onDraw(Canvas canvas), where Canvas is like a canvas on which you customize the style of the control.
The basic concepts of Canvas, Paint and so on will not be overlooked.
2. The method of explaining headline listing directly by demo is introduced first, save() and save Layer ().
save(): used to save the state of Canvas, save() method after the code can call Canvas translation, scaling, rotation, tailoring and other operations!
restore(): Used to restore the state saved before Canvas (can be imagined as the state of the coordinate axis), to prevent the operation of Canvas after save() method code, continue to have an impact on the subsequent drawing, through this method can avoid the impact of concatenation.
An example is given to illustrate that:
For example, we want to draw a triangular arrow to the right on the canvas. Of course, we can draw it directly. In addition, we can rotate the canvas 90 degrees, draw an upward arrow, and then rotate back (this rotation is very useful for marking the circle). Finally, we draw a 20-pixel circle in the lower right corner!
The online solution to this problem is to rotate back, and my feeling is that save() actually saves the state of the coordinate axis in Canvas.
MyView: 
public class MyView extends View { 
       public final static String TAG = "Example"; 
       private Paint mPaint = null; 
       public MyView(Context context) {
               super(context);
               mPaint = new Paint();
     }
      public MyView(Context context, AttributeSet attrs) {
           super(context, attrs);
    }
      public MyView(Context context, AttributeSet attrs, int defStyle) {      
                 super(context, attrs, defStyle);
      }
      @Override
      protected void onDraw(Canvas canvas) {
          super.onDraw(canvas);
          Paint background = new Paint();
          Paint line = new Paint();
          line.setStrokeWidth(4);
          background.setColor(Color.GRAY);
          line.setColor(Color.RED);
          int px = 500;
          int py = 500;
          canvas.drawRect(0, 0, px, py, background);
          canvas.save();
          canvas.rotate(90, px / 2, py / 2);
          // Draw an upward arrow
          canvas.drawLine(px / 2, 0, 0, py / 2, line); 
        // The left slash
          canvas.drawLine(px / 2, 0, px, py / 2, line);
        // The slash on the right
        canvas.drawLine(px / 2, 0, px / 2, py, line);
        // Vertical vertical bar
         canvas.restore();
        canvas.drawCircle(px - 100, py - 100, 50, line);
  }
}
The results after operation are as follows:


Paste_Image.png

The effect of commenting out two lines of code, canvas.save() and canvas.restore(), is as follows:


Paste_Image.png

Why is there such a difference?
Before canvas.save(), the coordinate axis of Canvas was:


Paste_Image.png


After save(), the coordinate axis state of this state is saved.
After canvas.rotate(90, px / 2, py / 2) rotates around the center of the circle, the coordinate axis becomes:


Paste_Image.png

canvas.drawLine(px / 2, 0, 0, py / 2, line); // The left slash
canvas.drawLine(px / 2, 0, px, py / 2, line);// The right slash canvas. drawLine (px/2, 0, px/2, py, line); //vertical vertical vertical bar
 These columns are drawn on the transformed coordinate axis in operation, so they are arrows to the right.
When canvas.restore() is called, the coordinate axis restores to the state before canvas.save(). So the reference axis of canvas.drawCircle(px - 100, py - 100, 50, line) is the coordinate axis before cnavas.save().
This explains why Canvas.save() and Canvas.save() circles are not in the same position.


Paste_Image.png

saveLayer
In general, Canvas can be seen as a canvas. All drawing operations such as drawBitmap and drawCircle occur on this canvas. This canvas also defines some attributes such as Matrix, color and so on. But if you need to implement some relatively complex mapping operations, such as multi-layer animation, maps (maps can be overlapped by multiple maps, such as: administrative layer, road layer, interest point layer). Canvas provides Layer support. By default, it can be seen that there is only one Layer. Android's Canvas can use Save Layer XXX and Restore to create intermediate layers for which Layers are managed according to the "stack structure":       


Paste_Image.png


 To create a new Layer to the Stack, you can use save Layer, Sava Layer Alpha to push a Layer from the Stack, and you can use restore, restore ToCount. However, when Layer enters the stack, subsequent DrawXXX operations occur on this Layer. When Layer exits the stack, it "draws" the images drawn at this layer onto the upper layer or Canvas. When Layer is copied to Canvas, it can specify Layer's transparency (Layer), which is specified when Layer is created: public int Layer Alpha (RectF, alpha, int, saveFlags), this example of Layers. This paper introduces the basic usage of the layer: Canvas can be seen as composed of two layers (Layer). To better illustrate the problem, we will modify the code slightly, draw a red circle in the default layer, a blue circle in the new layer, and the transparency of the new layer is 0 *88.     
public class Layers extends Activity { 
      @Override 
      protected void onCreate(Bundle savedInstanceState) { 
            super.onCreate(savedInstanceState);
            setContentView(new SampleView(this));
      }
      private static class SampleView extends View {
            private static final int LAYER_FLAGS = Canvas.MATRIX_SAVE_FLAG | 
            Canvas.CLIP_SAVE_FLAG11 | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG 
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG
            | Canvas.CLIP_TO_LAYER_SAVE_FLAG;

            private Paint mPaint;
            public SampleView(Context context) {
                  super(context);
                  setFocusable(true);
                  mPaint = new Paint();
                  mPaint.setAntiAlias(true);
            }
            @Override
            protected void onDraw(Canvas canvas) {
                  canvas.drawColor(Color.WHITE);
                  canvas.translate(10, 10);
                  mPaint.setColor(Color.RED);
                  canvas.drawCircle(75, 75, 75, mPaint); 
                  canvas.saveLayerAlpha(0, 0, 200, 200, 0x88, LAYER_FLAGS);
                  mPaint.setColor(Color.BLUE); 
                  canvas.drawCircle(125, 125, 75, mPaint); 
                  canvas.restore(); 
            }
      }
}
 Analysis: Canvas. saveLayer Alpha (0, 0, 200, 200, 0x88, LAYER_FLAGS) pushes a layer into the stack, followed by
mPaint.setColor(Color.BLUE);
canvas.drawCircle(125, 125, 75, mPaint);
Drawing a blue circle in this layer is not the same layer as drawing a red circle before.
The layers saved in canvas.restore() are on the red round layers.
The effect is as follows:


Paste_Image.png

Original address: http://www.cnblogs.com/liangstudyhome/p/4143498.html


Author: Smoke and rain follow the wind
Link: http://www.jianshu.com/p/e90accd0967f
Source: Brief Book
Copyright belongs to the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.