坚持学习每一天

爱生活，爱分享

如果您喜欢我的文章，可以点击关注，喜欢

先看看最终效果

image.png

首先新建一个类TaiJi集成VIew,并设置2个画笔

public class TaiJi extends View{

private Paint blackPaint;//黑色画笔

private Paint whitePaint;//白色画笔

public TaiJi(Context context) {//this在子类中调用构造方法

this(context,null);

}

public TaiJi(Context context, @Nullable AttributeSet attrs) {//this在子类中调用构造方法

this(context, attrs,0);

}

public TaiJi(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initPaint();//初始化

}

//初始化画笔

private void initPaint() {

blackPaint=new Paint();//创建画笔

blackPaint.setColor(Color.BLACK);//设置颜色

blackPaint.setAntiAlias(true);//抗锯齿

whitePaint=new Paint();

whitePaint.setColor(Color.WHITE);

whitePaint.setAntiAlias(true);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

}

}

然后在layout中写入该控件：

效果如图

image.png

再画之前我们分析一下怎么画：

1、先画两个半圆

2、再画两个半圆

3、最后画两个鱼眼

在onDraw中接着写

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

int width=canvas.getWidth();//确定画布宽度

int height=canvas.getHeight();//确定画布高度

canvas.translate(width/2,height/2);//将canvas坐标原点移动到画布中心

}

于是画布原点初始在左上方，经过偏移以后变到正中

image.png

开始绘制画图区域

RectF rectF=new RectF(-radius,-radius,radius,radius);//绘制一个矩形，绘制参数以此是左上右下

示意图

image.png

外面一圈是控件正常坐标下的绘制距离。当原点移动到正中心后图片绘制也将正中心算作原点。

开始画黑色半圆

/**

* rectF:代表绘制区域

* startAngle开始角度

* sweepAngle扫过角度

* useCenter是否经过圆心

* blackPaint画笔

*/

canvas.drawArc(rectF, 90, 180, true, blackPaint);//绘制黑色半圆

参数都比较好理解，就只有经过圆心一张图说明问题

image.png

黑色半圆效果

image.png

以此接着画

//绘制两个半圆

int radius = Math.min(width, height) / 2 - 100; //太极半径

RectF rect = new RectF(-radius, -radius, radius, radius); //绘制区域

canvas.drawArc(rect, 90, 180, true, blackPaing); //绘制黑色半圆

canvas.drawArc(rect, -90, 180, true, whitePaint); //绘制白色半圆

//绘制两个小圆

/**

* cx：圆心的x坐标。

cy：圆心的y坐标。

radius：圆的半径。

paint：绘制时所使用的画笔。

*/

int smallRadius = radius / 2;//小圆半径为大圆的一半

canvas.drawCircle(0, -smallRadius, smallRadius, blackPaing);

canvas.drawCircle(0, smallRadius, smallRadius, whitePaint);

//绘制鱼眼(两个更小的圆)

canvas.drawCircle(0, -smallRadius, smallRadius / 4, whitePaint);

canvas.drawCircle(0, smallRadius, smallRadius / 4, blackPaing);

效果如下

image.png

添加旋转效果

public void setRotate(float degrees) {

this.degrees = degrees;

invalidate();//重绘界面

}

在主界面中写

Handler handler=new Handler(){

private float degree=0;

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

taiji.setRotate(degree+=7);

this.sendEmptyMessageDelayed(0,1);//每1毫秒执行以此,每次角度+7

}

};

handler.sendEmptyMessageDelayed(0,1);//延时1毫秒执行

旋转太极完成，有兴趣的可以做一个可控制速度的电风扇。

传送门