Android 画一个太极图实例代码

程序员文章站 2024-03-05 08:59:54

今天练手一下，一起来画个太极图吧~ 最终效果如下：最终效果一般都是先讲原理，我就反其道而行，先讲实现吧。 1.继承实现初始化方法继承view，实...

今天练手一下，一起来画个太极图吧~

最终效果如下：

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);

Android 画一个太极图实例代码

第二步.png

3.画白色圆背景，即太极图的白鱼部分。

mpaint.setcolor(0xffffffff);
path0.rewind();
path0.addcircle(0, 0, 200, path.direction.cw);
canvas.drawpath(path0, mpaint);

Android 画一个太极图实例代码

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);//这一段注意，之后要删除

Android 画一个太极图实例代码

第四步.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);//这一段注意，之后要删除

Android 画一个太极图实例代码

第五步.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);//这一段注意，之后要删除

Android 画一个太极图实例代码

第六步.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);

Android 画一个太极图实例代码

第七步.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);

Android 画一个太极图实例代码

第八步.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使用Theme自定义Activity进入退出动画的方法

下一篇： Android 带有删除按钮的EditText

Android 画一个太极图实例代码

Android 画一个太极图实例代码

Android 实现两个Activity跳转实例

Android 嵌套Fragment的使用实例代码

使用Python写一个贪吃蛇游戏实例代码

Android App增量更新详解及实例代码

Android HorizontalScrollView内子控件横向拖拽实例代码

Android 保存Fragment 切换状态实例代码

Android 文件选择器详解及实例代码

Android 读取assets和raw文件内容实例代码

Android GPS定位详解及实例代码