Android 畫一個太極圖實例代碼

2019-12-12 05:11:33

字體：大中小

來源：轉載

供稿：網友

今天練手一下，一起來畫個太極圖吧~

最終效果如下：

最終效果

一般都是先講原理，我就反其道而行，先講實現吧。

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);        //設置畫筆透明度}

在onSizeChanged()方法中獲取高寬，便于之后繪制計算。

private int mWidth;private int mHeight;  @Overrideprotected 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.移動布局到中間

@Overrideprotected 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.畫黑色圓背景，即太極圖的黑魚部分，和白魚一樣大小位置，只是把白魚蓋住了，這里就需要用一些boolean運算進行繪制了。

//白魚的背景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.對黑魚（path1）進行boolean計算，把不需要的部分去掉。這里就是要把圓的右半邊消除，這里就需要用到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.到這里，我們看到，只需要在繪制一個白魚的頭就可以了，那么也和第五步一樣，使用一個boolean運算把多余的黑色去掉即可。

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

完成，最后上完整的代碼。代碼寫得有點亂，不過也是練習而已，哈哈。至于其中的boolean運算什么的，之后在我的自定義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: whitelaning@qq.com */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);  }}

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

以上就是對Android 實現太極的實例代碼，有興趣朋友可以參考下，謝謝大家對本站的支持！

上一篇：Android Bitmap壓縮方法的選擇詳解

下一篇：Android應用程序“R文件”消失