Androidは太極図の実例コードを描きます。

9571 ワード
Android 太極図
今日は練習して、一緒に太極図を描きましょう。
最終効果は以下の通りです。

最終効果
普通は原理を先に言って、私はその道を逆にして、先に実現を言います。
1.継承実現イニシャル方法
Viewを継承し、基本的な構造関数を実現する。

public TestView(Context context) {
  this(context, null);
}

public TestView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
}

public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
  this(context, attrs, defStyleAttr, 0);
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public TestView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  super(context, attrs, defStyleAttr, defStyleRes);
  init();
}
init()メソッドでは、初期化操作を行いますので、ここで画筆を初期化してください。

private Paint mPaint;

private void init() {
  initPaint();
}

/**
 *      
 */
private void initPaint() {
  mPaint = new Paint();        //      
  mPaint.setColor(Color.BLACK);    //      
  mPaint.setStyle(Paint.Style.FILL); //         
  mPaint.setStrokeWidth(10f);     //       10px
  mPaint.setAntiAlias(true);     //     
  mPaint.setAlpha(255);        //       
}
オンSizeChend()メソッドでは、幅が高くなり、その後の描画計算に便利です。

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;
}
二つのパスを作成します。計算はこの二つのパスで行います。

private Path path0 = new Path();
private Path path1 = new Path();
そして肝心なonDraw()方法です。ここではいくつかのステップに分けてプレゼンテーションを行います。
1.レイアウトを中間に移動

@Override
protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //       
  canvas.translate(mWidth / 2, mHeight / 2);
}
ps：簡潔のために、その後のコードは全部onDraw()の中で層ごとに増加しました。その後はonDraw()の外出括弧を書きません。
2.背景黄色を描く  

mPaint.setColor(0xffffff00);
  path0.addRect(-400, -400, 400, 400, Path.Direction.CW);
  canvas.drawPath(path0, mPaint);

第二ステップ.png
3.白い円の背景、つまり太極図の白魚部分を描く。

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

4.黒い円の背景、つまり太極図の黒い魚の部分は、白魚と同じぐらいの大きさの位置にありますが、白魚をかぶせただけです。ここではいくつかのbootlean演算で描きます。

//     
mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

//     
mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);//     ，

第四歩.png
5.黒い魚（path 1）をbookで計算し、不要な部分を削除します。ここでは円の右半分を消します。ここではpath.op（）の方法が必要です。

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);
canvas.drawPath(path0, mPaint);//     ，

第五歩.png
6.この時はもういらない他の半分の黒を取り除いてしまいましたが、黒い魚は丸い頭があるべきです。そうすると、私たちは頭をくっつけてあげます。

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);

path0.rewind();
path0.addCircle(0, -100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.UNION);

canvas.drawPath(path1, mPaint);//     ，

第六歩.png
7.ここに来て、白魚の頭を描くだけでいいです。5歩目と同じように、1つのブーメランを使って余分な黒を取り除けばいいです。

mPaint.setColor(0xffffffff);
path0.rewind();
path0.addCircle(0, 0, 200, Path.Direction.CW);
canvas.drawPath(path0, mPaint);

mPaint.setColor(0xff000000);
path1.addCircle(0, 0, 200, Path.Direction.CW);

path0.rewind();
path0.addRect(0, -200, 200, 200, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);

path0.rewind();
path0.addCircle(0, -100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.UNION);

path0.rewind();
path0.addCircle(0, 100, 100, Path.Direction.CW);
path1.op(path0, Path.Op.DIFFERENCE);
canvas.drawPath(path1, mPaint);

第七歩.png
8.ここで八卦図の背景を描きました。魚の目を描くだけでいいです。

//     
path0.rewind();
path0.addCircle(0, 100, 50, Path.Direction.CW);
mPaint.setColor(0xff000000);
canvas.drawPath(path0, mPaint);

//     
path0.rewind();
path0.addCircle(0, -100, 50, Path.Direction.CW);
mPaint.setColor(0xffffffff);
canvas.drawPath(path0, mPaint);

第八歩.png
最後に完全なコードを作成します。コードの書き方がちょっと乱れていますが、練習しただけです。その中のbootlean演算などは後で私がカスタマイズしたViewのノートに書いてください。

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: [email protected]
 */
public class TestView extends View {

  private Paint mPaint;
  private int mWidth;
  private int mHeight;

  public TestView(Context context) {
    this(context, null);
  }

  public TestView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
    this(context, attrs, defStyleAttr, 0);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public TestView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
  }

  private void init() {
    initPaint();
  }

  /**
   *      
   */
  private void initPaint() {
    mPaint = new Paint();        //      
    mPaint.setColor(Color.BLACK);    //      
    mPaint.setStyle(Paint.Style.FILL); //         
    mPaint.setStrokeWidth(10f);     //       10px
    mPaint.setAntiAlias(true);     //     
    mPaint.setAlpha(255);        //       
  }

  @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);
    //       
    canvas.translate(mWidth / 2, mHeight / 2);

    //      
    mPaint.setColor(0xffffff00);
    path0.addRect(-400, -400, 400, 400, Path.Direction.CW);
    canvas.drawPath(path0, mPaint);

    mPaint.setColor(0xffffffff);
    path0.rewind();
    path0.addCircle(0, 0, 200, Path.Direction.CW);
    canvas.drawPath(path0, mPaint);

    mPaint.setColor(0xff000000);
    path1.addCircle(0, 0, 200, Path.Direction.CW);

    path0.rewind();
    path0.addRect(0, -200, 200, 200, Path.Direction.CW);
    path1.op(path0, Path.Op.DIFFERENCE);

    path0.rewind();
    path0.addCircle(0, -100, 100, Path.Direction.CW);
    path1.op(path0, Path.Op.UNION);

    path0.rewind();
    path0.addCircle(0, 100, 100, Path.Direction.CW);
    path1.op(path0, Path.Op.DIFFERENCE);
    canvas.drawPath(path1, mPaint);

    //     
    path0.rewind();
    path0.addCircle(0, 100, 50, Path.Direction.CW);
    mPaint.setColor(0xff000000);
    canvas.drawPath(path0, mPaint);

    //     
    path0.rewind();
    path0.addCircle(0, -100, 50, Path.Direction.CW);
    mPaint.setColor(0xffffffff);
    canvas.drawPath(path0, mPaint);
  }
}
ホワイトニング
It's very easury to be different but very difficult to be better
以上はAndroidに対して太極拳の実例コードを実現して、興味がある友達は参考にしてもいいです。ありがとうございます。
Androidは削除ボタンのEditTextを持っています。
Androidはガウスぼかし効果を実現し、低バージョンに対応しています。