[View] Android Custom Canvas drawing of articles (five)

Foreword

CanvasWe often say that the canvas, said before all drawing operations, are acting on the Canvasabove.

• Custom View [Android] Fundamentals of the drawing (a)
• [Android] Custom View Path drawing of articles (B)
• [View] Android custom drawing of text articles (c)
• [Android] Custom View actual articles of the drawing (FIG Radar) (iv)
• [View] Android Custom Canvas drawing of articles (five)

CanvasMainly in the following control methods, these methods are applied to the Canvaswhole

• translateTranslation
  Let's draw a rectangle, after the translation, again drawing

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        //平移
        canvas.translate(100, 100);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

It can be seen, and two non-overlapping rectangles

• rotateRotation
  is rectangular before, for ease of understanding, auxiliary lines plus 2

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        canvas.drawLine(0, 0, 1000, 1000, paint);
        //旋转
        canvas.rotate(30);
        paint.setColor(Color.RED);
        canvas.drawLine(0, 0, 1000, 1000, paint);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

You can see, the default rotation point is (0,0), and of course we can also specify the origin
rotate(float degrees, float px, float py)

        for (int i = 0; i < 6; i++) {
            canvas.rotate(360 / 6, 500, 1000);
            canvas.drawLine(500, 500, 500, 1000, paint);
        }

image.png

In fact, it is the first translation, in rotation, and then translating back, the source code is as follows

    public final void rotate(float degrees, float px, float py) {
        if (degrees == 0.0f) return;
        translate(px, py);
        rotate(degrees);
        translate(-px, -py);
    }

image.png

• scale Scaling

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
       //缩放
        canvas.scale(0.5f, 0.5f);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

• skew Miter

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
       //缩放
        canvas.skew(0, 0.5f);
        paint.setColor(Color.RED);
        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);

image.png

• clipseries
  clipRect(Rect rect)
clipRect(RectF rect)
clipRect(float left, float top, float right, float bottom)
clipPath(Path path)

After cutting, canvasother areas will be cut off only in the area of painting is visible

        canvas.drawRect(new Rect(500, 500, 1000, 1000), paint);
        canvas.clipRect(new Rect(500, 500, 600, 600));
        canvas.drawColor(Color.RED);
        canvas.drawCircle(500, 500, 50, paint);

image.png

• saveSave and restorereturn

For all operations before the canvasfollowing is irreversible, such as we do a lot of operations, hoping to canvassave the state when necessary to use save. Invoked savewhen the process saves the current canvasstate, which was placed in a particular stack; call restoretime method, and then removed from the stack.

Look at an example,

        canvas.drawRect(new Rect(0, 0, 1000, 1000), paint);

        canvas.clipRect(new Rect(100, 100, 900, 900));
        canvas.drawColor(Color.RED);
        canvas.save();
        canvas.clipRect(new Rect(200, 200, 800, 800));
        canvas.drawColor(Color.GREEN);
        canvas.save();
        canvas.clipRect(new Rect(300, 300, 700, 700));
        canvas.drawColor(Color.YELLOW);
        canvas.save();

image.png

When we call 2 times restore

        canvas.restore();
        canvas.restore();
        canvas.drawColor(Color.MAGENTA);

image.png

Original green part is filled with purple, logical LIFO stack.

Reproduced in: https: //www.jianshu.com/p/9dbb0014770a