基本api
1、测量文字尺寸
![](https://img.haomeiwen.com/i2711276/9af4e437821f234f.png)
测量文字尺寸.png
2、文字绘制方式
![](https://img.haomeiwen.com/i2711276/a4147431d790d995.png)
文字绘制方式.png
3、文字绘制显示效果
![](https://img.haomeiwen.com/i2711276/be21f003dc33ef07.png)
文字绘制显示效果.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()
网友评论