如何在Android中为画布上绘制的文本的不同部分着色?
我正在尝试重新创建以下动画: 可以在此处访问动画GIF: 在此动画中,随着波浪的上升和下降,文本的颜色会发生变化:波浪上方的文本部分为深蓝色,波浪下方的文本部分为浅蓝色。有没有办法在Android中实现这一点 我已经实现了动画的其余部分,如上图所示: 下面是我在画布上绘制的代码:如何在Android中为画布上绘制的文本的不同部分着色?,android,string,colors,android-canvas,Android,String,Colors,Android Canvas,我正在尝试重新创建以下动画: 可以在此处访问动画GIF: 在此动画中,随着波浪的上升和下降,文本的颜色会发生变化:波浪上方的文本部分为深蓝色,波浪下方的文本部分为浅蓝色。有没有办法在Android中实现这一点 我已经实现了动画的其余部分,如上图所示: 下面是我在画布上绘制的代码: public void createShader(){ mDefaultAngularFrequency = 2.0f * Math.PI / DEFAULT_WAVE_LENGTH_RATIO / ge
public void createShader(){
mDefaultAngularFrequency = 2.0f * Math.PI / DEFAULT_WAVE_LENGTH_RATIO / getWidth();
mDefaultAmplitude = (getHeight()) * DEFAULT_AMPLITUDE_RATIO;
mDefaultWaterLevel = (getHeight()) * DEFAULT_WATER_LEVEL_RATIO;
mDefaultWaveLength = getWidth();
Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
final int endX = getWidth() + 1;
final int endY = getHeight() + 1;
float[] waveY = new float[endX];
for (int beginX = 0; beginX < endX; beginX++) {
double wx = beginX * mDefaultAngularFrequency;
float beginY = (float) (mDefaultWaterLevel + mDefaultAmplitude * Math.sin(wx));
canvas.drawLine(beginX, beginY, beginX, endY, mWavePaint);
waveY[beginX] = beginY;
}
mWaveShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
mWavePaint.setShader(mWaveShader);
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Draw the outer circle
canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2 - 15, mCirclePaint);
if (mWavePaint.getShader() == null) {
createShader();
mWavePaint.setShader(mWaveShader);
}
// scale shader according to mWaveLengthRatio and mAmplitudeRatio
// this decides the size(mWaveLengthRatio for width, mAmplitudeRatio for height) of waves
mShaderMatrix.setScale(mWaveLengthRatio / DEFAULT_WAVE_LENGTH_RATIO, mAmplitudeRatio / DEFAULT_AMPLITUDE_RATIO,
0, mDefaultWaterLevel);
// translate shader according to mWaveShiftRatio and mWaterLevelRatio
// this decides the start position(mWaveShiftRatio for x, mWaterLevelRatio for y) of waves
mShaderMatrix.postTranslate(mWaveShiftRatio * getWidth(),
(DEFAULT_WATER_LEVEL_RATIO - mWaterLevelRatio) * getHeight());
// assign matrix to invalidate the shader
mWaveShader.setLocalMatrix(mShaderMatrix);
//draw the inner circle
float innerCircleRadius = getWidth()/2 - 30;
canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, innerCircleRadius, mWavePaint);
//draw the text inside the circles
canvas.drawText(String.format("%.0f", mPercentageValue) + "%", getWidth() / 2 - 10,
(getHeight() - mTextPaint.ascent()) / 2, mTextPaint);
}
调用
drawText
两次,使用不同的重印颜色,第二次使用波浪剪裁,非常感谢@pskink。你可以告诉我如何进行剪辑吗?或者你可以简单地使用两个具有两种不同颜色的着色器。我看不出有任何区别:顺便说一句,可以使用一个着色器进行剪辑,请参见,运行后单击视图以查看其实际效果
ObjectAnimator waveShiftAnim = ObjectAnimator.ofFloat(l, "waveShiftRatio", 0f, 0.5f);
waveShiftAnim.setRepeatCount(ValueAnimator.INFINITE);
waveShiftAnim.setDuration(mWaveAnimDuration);
waveShiftAnim.setInterpolator(new LinearInterpolator());
animators.add(waveShiftAnim);