Android开发 自定义View_利用canvas的clipRect实现文字颜色滚动效果
作者:互联网
前言
实现原理很简单,就是绘制2层不同颜色的文本,然后将其中一个的画布裁剪到合适的大小在向一个方向移动起来。
效果图
代码
import android.content.Context import android.graphics.Canvas import android.graphics.Color import android.graphics.Paint import android.graphics.Rect import android.util.AttributeSet import android.util.TypedValue import android.view.View class ScrollGradientText(context: Context, attrs: AttributeSet?) : View(context, attrs) { private var mTextSize = 24f private var mBottomTextColor = Color.WHITE private var mTopTextColor = Color.parseColor("#48F3D0") private var mText = "hello world" private var mBottomPaint = Paint() private var mTopPaint = Paint() private var mWidth = 0 private var mHeight = 0 private var mStepCount = 0 private var mSpeed = 150 private var mLeft = 0 private var mRight = 0 init { updatePaint() } /** * 文本内容 */ fun setText(text: String) { mText = text invalidate() } /** * 文字颜色 */ fun setTextColor(topTextColor: Int, bottomTextColor: Int) { mTopTextColor = topTextColor mBottomTextColor = bottomTextColor updatePaint() invalidate() } /** * 设置文字大小 */ fun setTextSize(textSize: Float) { mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, textSize, resources.displayMetrics) updatePaint() invalidate() } /** * 设置速度 */ fun setSpeed(speed: Int) { mSpeed = speed } /** * 测量尺寸 */ override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) mWidth = mBottomPaint.measureText(mText).toInt() mHeight = MeasureSpec.getSize(heightMeasureSpec) mLeft = -mWidth / 3 mRight = 0 setMeasuredDimension(mWidth, mHeight) } private fun updatePaint() { mBottomPaint = Paint().apply { color = mBottomTextColor textSize = mTextSize textAlign = Paint.Align.CENTER isAntiAlias = true } mTopPaint = Paint().apply { color = mTopTextColor textSize = mTextSize textAlign = Paint.Align.CENTER isAntiAlias = true } } override fun onDraw(canvas: Canvas) { super.onDraw(canvas) drawBottomText(canvas) drawTopText(canvas) } private fun drawBottomText(canvas: Canvas) { canvas.save() val offset = textCenteredOffset(mBottomPaint) canvas.drawText(mText, (width / 2).toFloat(), (height / 2).toFloat() - offset, mBottomPaint) canvas.restore() } private fun drawTopText(canvas: Canvas) { canvas.save() if (mLeft > width) { mLeft = -mWidth / 3 mRight = 0 mStepCount = 0 } mStepCount += 5 mLeft += mStepCount mRight += mStepCount canvas.clipRect(mLeft, 0, mRight, mHeight) val offSet = textCenteredOffset(mTopPaint) canvas.drawText(mText, (width / 2).toFloat(), (height / 2).toFloat() - offSet, mTopPaint) canvas.restore() postInvalidateDelayed(150) } /** * 文字居中偏移量 */ private fun textCenteredOffset(paint: Paint): Int { val bounds = Rect() paint.getTextBounds(mText, 0, mText.length, bounds) return (bounds.top + bounds.bottom) / 2 } }
End
标签:canvas,clipRect,自定义,Paint,private,fun,var,import 来源: https://www.cnblogs.com/guanxinjing/p/16338830.html