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);        //设置画笔透明度
}

在onsizechanged()方法中获取高宽，便于之后绘制计算。

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.画黑色圆背景，即太极图的黑鱼部分，和白鱼一样大小位置，只是把白鱼盖住了，这里就需要用一些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: [e-mail]
 */
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 实现太极的实例代码，有兴趣朋友可以参考下，谢谢大家对本站的支持！