酷炫文字变色

基本api

1、测量文字尺寸

测量文字尺寸.png

2、文字绘制方式

文字绘制方式.png

3、文字绘制显示效果

文字绘制显示效果.png

实现

1、设置全局变量

val drawText = "显示的文字"
var mBlackColorTextPaint: Paint = Paint()
var mRedColorTextPaint: Paint
var mLineColorPaint: Paint

var precent: Float = 0f //用于渐变效果

2、paint的初始化

init {
    mBlackColorTextPaint.color = Color.BLACK
    mBlackColorTextPaint.isAntiAlias = true
    mBlackColorTextPaint.textSize = 80f

    mRedColorTextPaint = Paint()
    mRedColorTextPaint.color = Color.RED
    mRedColorTextPaint.isAntiAlias = true
    mRedColorTextPaint.textSize = 80f

    mLineColorPaint = Paint()
    mLineColorPaint.color = Color.BLUE
    mLineColorPaint.isAntiAlias = true
    mLineColorPaint.strokeWidth = 2f
}

3、在onDraw()进行绘制

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

    //画x轴的中心线
    drawXCenterLine(canvas)
    //画Y轴的中心线
    drawYCenterLine(canvas)

    //在x轴中心显示文字
    drawXCenterBlackTextWithMeasure(canvas)
    drawXCenterBlackTextWithApi(canvas)

    //在y轴中心显示文字
    drawBlackCenterText(canvas)
    drawRedCenterText(canvas)
}

4、绘制x、y中心线

private fun drawXCenterLine(canvas: Canvas?) {
    canvas?.drawLine(
        (width / 2).toFloat(),
        0F,
        (width / 2).toFloat(),
        height.toFloat(),
        mLineColorPaint
    )
}

private fun drawYCenterLine(canvas: Canvas?) {
    canvas?.drawLine(
        0F, (height / 2).toFloat(), width.toFloat(),
        (height / 2).toFloat(), mLineColorPaint
    )
}

5、在x轴中心线上绘制文字的两种方式

/**
 * 通过代码设置文字x轴居中
 */
private fun drawXCenterBlackTextWithMeasure(canvas: Canvas?) {
    mBlackColorTextPaint.textAlign = Paint.Align.LEFT
    //获取文字的长度
    val measureText = mBlackColorTextPaint.measureText(drawText)
    canvas?.drawText(
        drawText,
        (width / 2).toFloat() - measureText / 2,
        300f,
        mBlackColorTextPaint
    )
}

/**
 * 通过api设置文字居中
 */
private fun drawXCenterBlackTextWithApi(canvas: Canvas?) {
    //默认是以文字的左边为基准，设置了下面这个，就可以让文字居中了
    mBlackColorTextPaint.textAlign = Paint.Align.CENTER
    canvas?.drawText(drawText, (width / 2).toFloat(), 100f, mBlackColorTextPaint)
}

6、设置红色文字居中

  /**
   * 设置红色文字居中
   */
 private fun drawRedCenterText(canvas: Canvas?) {
        canvas?.run {
//            save()
            mRedColorTextPaint.textAlign = Paint.Align.LEFT

            //获取文字长度
            val measureTextLength = mRedColorTextPaint.measureText(drawText)
            //获取文字的最大高度
            val fontMetrics = mRedColorTextPaint.fontMetrics
            val textMaxHeight = fontMetrics.bottom - fontMetrics.top

            val textLeft = width / 2 - measureTextLength / 2
            val textTop = height / 2 - fontMetrics.top - textMaxHeight / 2

            val clipRight = textLeft + precent * measureTextLength
            clipRect(textLeft, 0f, clipRight, height.toFloat())
            drawText(
                drawText,
                textLeft,
                textTop,
                mRedColorTextPaint
            )
//            restore()
        }
    }

  /**
   * 设置黑色文字居中
   */
    private fun drawBlackCenterText(canvas: Canvas?) {
        canvas?.save()
        mBlackColorTextPaint.textAlign = Paint.Align.LEFT

        //获取文字长度
        val measureTextLength = mBlackColorTextPaint.measureText(drawText)
        //获取文字的最大高度
        val fontMetrics = mBlackColorTextPaint.fontMetrics
        val textMaxHeight = fontMetrics.bottom - fontMetrics.top

        val textLeft = width / 2 - measureTextLength / 2
        val clipTextLeft = textLeft + precent * measureTextLength
        canvas?.clipRect(clipTextLeft, 0f, clipTextLeft + measureTextLength, height.toFloat())
        canvas?.drawText(
            drawText,
            textLeft,
            height / 2 - fontMetrics.top - textMaxHeight / 2,
            mBlackColorTextPaint
        )
        canvas?.restore()
    }

7、模拟颜色变化

val duration = ObjectAnimator.ofFloat(draw_text_view, "precent", 0f, 1f)
        .setDuration(5000)
duration.addUpdateListener {
    draw_text_view.invalidate()
}
duration.start()