Android drawing a Taiji diagram instance code _android

Today practicing, together to draw a Taiji

The final effect is as follows:

Final effect

Generally speaking the principle first, I will go against the road, first speak to achieve it.

1. Inheritance implementation Initialization method

Inherit view to implement the basic constructor:

Public TestView {This
  (context, NULL);
}

Public TestView (context, AttributeSet attrs) {This
  (context, attrs, 0);
}

Public TestView (context, AttributeSet attrs, int defstyleattr) {This
  (context, Attrs, defstyleattr, 0);
}

@TargetApi (build.version_codes. Lollipop) Public
testview (context, AttributeSet attrs, int defstyleattr, int defstyleres) {
  super ( Context, Attrs, defstyleattr, defstyleres);
  Init ();
}

In the Init () method, initialize the brush here.

Private Paint Mpaint;

private void Init () {
  initpaint ();
}

/**
 * Initialization brush/
private void Initpaint () {
  mpaint = new Paint ();        Create a Brush object
  mpaint.setcolor (color.black);    Set Brush color
  mpaint.setstyle (Paint.Style.FILL);//Set brush mode to fill
  mpaint.setstrokewidth (10f);     Sets the brush width to 10px
  Mpaint.setantialias (true);     Set anti-aliasing
  mpaint.setalpha (255);        Set Brush Transparency
}

Obtain a high width in the onsizechanged () method, which is convenient for drawing computations later.

private int mwidth;
private int mheight;  

@Override
protected void onsizechanged (int w, int h, int oldw, int oldh) {
  super.onsizechanged (W, H, OLDW, OLDH) ;
  Mwidth = W;
  Mheight = h;
}

Create two paths, and the calculations are done in both paths.

Private Path Path0 = new Path ();
Private Path path1 = new Path ();

Then to the most critical OnDraw () method, this will be demonstrated in a few steps.

1. Move the layout to the middle

@Override
protected void OnDraw (Canvas Canvas) {
  super.ondraw (Canvas);
  Move the layout to the Middle
  canvas.translate (MWIDTH/2, MHEIGHT/2);
}

PS: In order to be concise, the following code is added in OnDraw (), and then does not write OnDraw () out of parentheses.

2. Painted Background yellow

Mpaint.setcolor (0xffffff00);
  Path0.addrect ( -400, -400, N, Path.Direction.CW);
  Canvas.drawpath (Path0, mpaint);

Step two. png

3. Draw a white round background, that is, the white fish part of the Taiji diagram.

Mpaint.setcolor (0xFFFFFFFF);
Path0.rewind ();
Path0.addcircle (0, 0, Path.Direction.CW);
Canvas.drawpath (Path0, mpaint);

4. Draw a black round background, that is, the snakehead part of the Taiji, and the size of the white fish position, just cover the white fish, here you need to use some Boolean operations to draw.

White fish background
mpaint.setcolor (0xFFFFFFFF);
Path0.rewind ();
Path0.addcircle (0, 0, Path.Direction.CW);
Canvas.drawpath (Path0, mpaint);

The background of the snakehead
Mpaint.setcolor (0xff000000);
Path1.addcircle (0, 0, Path.Direction.CW);
Canvas.drawpath (Path0, mpaint);//This paragraph note, after which you want to delete

Fourth step. png

5. Make a Boolean calculation of the Snakehead (path1) and remove the unwanted parts. Here is to remove the right half of the circle, here is the need to use the Path.op () method.

Mpaint.setcolor (0xFFFFFFFF);
Path0.rewind ();
Path0.addcircle (0, 0, Path.Direction.CW);
Canvas.drawpath (Path0, mpaint);

Mpaint.setcolor (0xff000000);
Path1.addcircle (0, 0, Path.Direction.CW);

Path0.rewind ();
Path0.addrect (0, -200, MB, Path.Direction.CW);
Path1.op (Path0, Path.Op.DIFFERENCE);
Canvas.drawpath (Path0, mpaint);//This paragraph note, after which you want to delete

Fifth step. png

6. At this time we have removed the unwanted half of the black, but the snakehead should have a round head, then we will splice a head to it.

Mpaint.setcolor (0xFFFFFFFF);
Path0.rewind ();
Path0.addcircle (0, 0, Path.Direction.CW);
Canvas.drawpath (Path0, mpaint);

Mpaint.setcolor (0xff000000);
Path1.addcircle (0, 0, Path.Direction.CW);

Path0.rewind ();
Path0.addrect (0, -200, MB, Path.Direction.CW);
Path1.op (Path0, Path.Op.DIFFERENCE);

Path0.rewind ();
Path0.addcircle (0, -100, Path.Direction.CW);
Path1.op (Path0, Path.Op.UNION);

Canvas.drawpath (path1, mpaint);//This paragraph note, after which you want to delete

Sixth step. png

7. Here, we see, just to draw a white fish head on it, and then, like the fifth step, use a Boolean operation to remove the extra black.

Mpaint.setcolor (0xFFFFFFFF);
Path0.rewind ();
Path0.addcircle (0, 0, Path.Direction.CW);
Canvas.drawpath (Path0, mpaint);

Mpaint.setcolor (0xff000000);
Path1.addcircle (0, 0, Path.Direction.CW);

Path0.rewind ();
Path0.addrect (0, -200, MB, Path.Direction.CW);
Path1.op (Path0, Path.Op.DIFFERENCE);

Path0.rewind ();
Path0.addcircle (0, -100, Path.Direction.CW);
Path1.op (Path0, Path.Op.UNION);

Path0.rewind ();
Path0.addcircle (0, N, Path.Direction.CW);
Path1.op (Path0, Path.Op.DIFFERENCE);
Canvas.drawpath (path1, mpaint);

Seventh step. png

8. So far, the background of the gossip map has been drawn, just to draw the eyes of the fish can be.

Draw Black Small round
path0.rewind ();
Path0.addcircle (0, M, Path.Direction.CW);
Mpaint.setcolor (0xff000000);
Canvas.drawpath (Path0, mpaint);

Draw White small round
path0.rewind ();
Path0.addcircle (0, -100, M, Path.Direction.CW);
Mpaint.setcolor (0xFFFFFFFF);
Canvas.drawpath (Path0, mpaint);

Eighth step. png

Complete, and finally complete the code. The code is a bit messy, but it's just practice, haha. As for the boolean operation, then write it in my custom view notes.

Import Android.annotation.TargetApi;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import Android.graphics.Color;
Import Android.graphics.Paint;
Import Android.graphics.Path;
Import Android.os.Build;
Import Android.util.AttributeSet;

Import Android.view.View;
 /** * Created by whitelaning on 2016/6/28.
  * email:whitelaning@qq.com * * public class TestView extends View {private Paint mpaint;
  private int mwidth;

  private int mheight;
  Public TestView {This (context, NULL);
  Public TestView (context, AttributeSet attrs) {This (context, attrs, 0);
  Public TestView (context, AttributeSet attrs, int defstyleattr) {This (context, attrs, defstyleattr, 0); } @TargetApi (Build.version_codes. Lollipop) public TestView (context, AttributeSet attrs, int defstyleattr, int defstyleres) {Super (context, a
    Ttrs, Defstyleattr, defstyleres);
  Init ();
  private void Init () {initpaint ();

  }/** * Initialization brush/private void Initpaint () {mpaint = new Paint ();    Create a Brush object Mpaint.setcolor (Color.Black); Sets the brush color Mpaint.setstyle (Paint.Style.FILL);     Set the brush mode to fill mpaint.setstrokewidth (10f);     Sets the brush width to 10px mpaint.setantialias (true);        Set anti-aliasing Mpaint.setalpha (255); Set brush Transparency} @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, h
    , OLDW, OLDH);
    Mwidth = W;
  Mheight = h;
  Private path Path0 = new Path ();

  Private Path path1 = new Path ();
    @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);

    Move the layout to the Middle Canvas.translate (MWIDTH/2, MHEIGHT/2);
    Draw large background color mpaint.setcolor (0XFFFFFF00);
    Path0.addrect ( -400, -400, N, Path.Direction.CW);

    Canvas.drawpath (Path0, mpaint);
    Mpaint.setcolor (0xFFFFFFFF);
    Path0.rewind ();
    Path0.addcircle (0, 0, Path.Direction.CW);

    Canvas.drawpath (Path0, mpaint); Mpaint.setColor (0xff000000);

    Path1.addcircle (0, 0, Path.Direction.CW);
    Path0.rewind ();
    Path0.addrect (0, -200, MB, Path.Direction.CW);

    Path1.op (Path0, Path.Op.DIFFERENCE);
    Path0.rewind ();
    Path0.addcircle (0, -100, Path.Direction.CW);

    Path1.op (Path0, Path.Op.UNION);
    Path0.rewind ();
    Path0.addcircle (0, N, Path.Direction.CW);
    Path1.op (Path0, Path.Op.DIFFERENCE);

    Canvas.drawpath (path1, mpaint);
    Draw Black small round path0.rewind ();
    Path0.addcircle (0, M, Path.Direction.CW);
    Mpaint.setcolor (0xff000000);

    Canvas.drawpath (Path0, mpaint);
    Draw White small round path0.rewind ();
    Path0.addcircle (0, -100, M, Path.Direction.CW);
    Mpaint.setcolor (0xFFFFFFFF);
  Canvas.drawpath (Path0, mpaint);

 }
}

Whitelaning
It ' s very easy to is different but very difficult to be better

The above is on the Android implementation of Taiji instance code, interested friends can refer to, thank you all for the support of this site!