java darwarc,自定义view基础知识——drawArc()

重要：自定义view时刻牢记的模式：

1 MeasureSpec.EXACTLY：

使用measureSpec中size的值作为宽高的精确值当我们将控件的layout_width或layout_height指定为具体数值时如andorid:layout_width="50dip"，或者为FILL_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。

2 MeasureSpec.AT_MOST：

使用measureSpec中size的值作为最大值，采用不超过这个值的最大允许值

当控件的layout_width或layout_height指定为WRAP_CONTENT时，控件大小一般随着控件的子空间或内容进行变化，此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此，此时的mode是AT_MOST，size给出了父控件允许的最大尺寸。

3 MeasureSpec.UNSPECIFIED是未指定尺寸，这种情况不多

开始正文

绘制圆弧函数详细分析--drawArc()

public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

参数：(中文)

oval - 　　　　用于确定圆弧形状与尺寸的椭圆边界(即椭圆外切矩形)

startAngle - 开始角度(以时钟3点的方向为0°，逆时针为正方向)

sweepAngle - *** 扫过角度***(以时钟3点的方向为0°，逆时针为正方向)

useCenter - 是否包含圆心

paint - 绘制圆弧的画笔　　2.绘制圆弧的原理

kotlin版本

class Taiji @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : View(context, attrs, defStyleAttr) {

private var whitePaint: Paint? = null //白色画笔

private var blackPaing: Paint? = null //黑色画笔

private var degrees = 0f

//初始化画笔函数

private fun initPaints() {

whitePaint = Paint()

whitePaint!!.isAntiAlias = true

whitePaint!!.color = Color.WHITE

blackPaing = Paint(whitePaint)

blackPaing!!.color = Color.BLACK

}

init {

initPaints()

}

fun setDegrees(degrees: Float) {

this.degrees = degrees

invalidate()

}

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {

super.onSizeChanged(w, h, oldw, oldh)

val measuredHeight = measuredHeight

}

override fun onDraw(canvas: Canvas) {

val width = width //画布宽度 view设置的宽度

val height = height //画布高度 view设置的高度

canvas.translate((width / 2).toFloat(), (height / 2).toFloat()) //将画布移动到中心

canvas.drawColor(Color.GRAY) //绘制背景色

//在绘制完背景色后调用即可

canvas.rotate(degrees)

//半径

val radius = Math.min(width, height) / 2 - 100

val rf = RectF((-radius).toFloat(), (-radius).toFloat(), radius.toFloat(), radius.toFloat())

canvas.drawArc(rf, -90f, 180f, true, whitePaint!!)

canvas.drawArc(rf, 90f, 180f, true, blackPaing!!)

//绘制两个小圆

val smallRadius = radius / 2 //小圆半径为大圆的一般

canvas.drawCircle(0f, (-smallRadius).toFloat(), smallRadius.toFloat(), blackPaing!!)

canvas.drawCircle(0f, smallRadius.toFloat(), smallRadius.toFloat(), whitePaint!!)

//太极的小圆

val smallcicleRadius = smallRadius / 4 //小圆半径为大圆的一般

canvas.drawCircle(0f, (-smallRadius).toFloat(), smallcicleRadius.toFloat(), whitePaint!!)

canvas.drawCircle(0f, smallRadius.toFloat(), smallcicleRadius.toFloat(), blackPaing!!)

}

}

java版本

package com.viewtest;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.RectF;

import android.util.AttributeSet;

import android.view.View;

/**

* Created by Administrator on 2017/6/19.

*/

public class TaijiView extends View{

private Paint whitePaint; //白色画笔

private Paint blackPaing; //黑色画笔

private float degrees = 0;

public TaijiView(Context context) {

this(context, null);

}

public TaijiView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public TaijiView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initPaints();

}

//初始化画笔函数

private void initPaints() {

whitePaint = new Paint();

whitePaint.setAntiAlias(true);

whitePaint.setColor(Color.WHITE);

blackPaing = new Paint(whitePaint);

blackPaing.setColor(Color.BLACK);

}

public void setDegrees(float degrees) {

this.degrees = degrees;

invalidate();

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

int measuredHeight = getMeasuredHeight();

}

@Override

protected void onDraw(Canvas canvas) {

int width = getWidth(); //画布宽度 view设置的宽度

int height = getHeight(); //画布高度 view设置的高度

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

canvas.drawColor(Color.GRAY); //绘制背景色

//在绘制完背景色后调用即可，旋转的关键

canvas.rotate(degrees);

//半径

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

RectF rf = new RectF(-radius,-radius,radius,radius);

canvas.drawArc(rf,-90,180,true,whitePaint);

canvas.drawArc(rf,90,180,true,blackPaing);

//绘制两个小圆

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

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

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

//太极的小圆

int smallcicleRadius = smallRadius / 4; //小圆半径为大圆的一般

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

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

}

}

测试activity：

class TaijiActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_taiji)

var handler: Handler = object : Handler() {

var degree: Float = 0f

override fun handleMessage(msg: Message) {

degree += 10f

taiji.setDegrees(degree)

this.sendEmptyMessageDelayed(0, 80)

}

}

handler.sendEmptyMessageDelayed(0, 20)

}

}

自定义view的最佳开始示例

效果图：

熟悉cavas的方法：drawArc

GIF_20170619_155609.gif

最后欢迎加入Kotlin QQ群，一起讨论学习：

Paste_Image.png

欢迎关注 微信公号

android频道