自定义 view 练手 - 太极图

ps：本项目参考自：二十多行代码画太极、

好了，咱们来画一个复杂点的图，太极图，说真的太极图我们看着很复杂的，但是意外的好画呢，我们今天就拿他来练练手

效果图：

很简单的，3部就好了

• 先画左右黑白的半圆
  我们可以用弧线绘制出来
• 再画上下黑白2个小圆
• 最后画上下2个最小的太极眼

真是简单的我都不想说了，写到这里我都在想要不要发这篇文章了，水字数啦~

class TaijiView : View {

    private var mWhitePaint: Paint = Paint()
    private var mBlackPaint: Paint = Paint()
    private var degree: Float = 0f

    @JvmOverloads
    constructor(context: Context, attributeSet: AttributeSet? = null, defAttrStyle: Int = 0)
            : super(context, attributeSet, defAttrStyle) {

        // 初始化画笔
        initPaint()
    }

    /**
     * 初始化画笔
     */
    fun initPaint() {
        mBlackPaint.strokeWidth = 0f
        mBlackPaint.color = Color.BLACK
        mBlackPaint.isAntiAlias = true
        mBlackPaint.style = Paint.Style.FILL

        mWhitePaint.strokeWidth = 0f
        mWhitePaint.color = Color.WHITE
        mWhitePaint.isAntiAlias = true
        mWhitePaint.style = Paint.Style.FILL
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        var r: Float = (Math.min(width, height) / 2 * 0.8).toFloat()

        canvas?.translate(width / 2.toFloat(), height / 2.toFloat())
        canvas?.rotate(degree)

        // 画太极左右黑白
        canvas?.drawArc(RectF(-r, -r, r, r), -90f, 180f, true, mWhitePaint)
        canvas?.drawArc(RectF(-r, -r, r, r), 90f, 180f, true, mBlackPaint)

        // 画太极上下小半圆
        canvas?.drawCircle(0f, -r / 2.toFloat(), r / 2.toFloat(), mBlackPaint)
        canvas?.drawCircle(0f, r / 2.toFloat(), r / 2.toFloat(), mWhitePaint)

        // 画太极上下的眼
        canvas?.drawCircle(0f, -r / 2.toFloat(), r / 10.toFloat(), mWhitePaint)
        canvas?.drawCircle(0f, r / 2.toFloat(), r / 10.toFloat(), mBlackPaint)
    }

    fun setDegree(degree: Float) {
        this.degree = degree
        invalidate()
    }

}