Android 绘图学习
LinearGradient 和 SweepGradient,这次讲解RadialGradient;
RadialGradient被称为放射渐变,就是从中心向外圆形渐变。
两个构造函数,第一个构造函数可以实现两种颜色的渐变,第二个构造函数可以实现多个颜色的渐变。
RadialGradient(float centerX, float centerY, float radius, @ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode);
RadialGradient(float centerX, float centerY, float radius,
@NonNull @ColorInt int colors[], @Nullable float stops[],
@NonNull TileMode tileMode)
参数说明:
centerX ,centerY:shader的中心坐标,开始渐变的坐标。
radius:渐变的半径,
centerColor,edgeColor:中心点渐变颜色,边界的渐变颜色,
colors:渐变颜色数组,
stoops:渐变位置数组,类似扫描渐变的positions数组,取值[0,1],中心点为0,半径到达位置为1.0f,
tileMode:shader未覆盖以外的填充模式。
2 两种颜色渐变
构造函数:
RadialGradient(float centerX, float centerY, float radius, @ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode);
提供中心坐标,半径,颜色值,TileMode
radialGradient = new RadialGradient(450,450,400,Color.RED,Color.GREEN, Shader.TileMode.CLAMP);
mPaint.setShader(radialGradient);
canvas.drawCircle(450,450,450,mPaint);
3 多种颜色放射渐变
May be <code>null</code>. Valid values are between <code>0.0f</code> and
* <code>1.0f</code>. The relative position of each corresponding color in
* the colors array. If <code>null</code>, colors are distributed evenly
* between the center and edge of the circle.
RadialGradient(float centerX, float centerY, float radius,
@NonNull @ColorInt int colors[], @Nullable float stops[],
@NonNull TileMode tileMode)
Stops数组取值为[0-1],一般为从小到大,表示每个位置对应的颜色值,如果stops不为null,colors必须和stops一一对应,否则可能导致崩溃,如果stops为null,各颜色从中心到边界线性渐变。
stops数组为null,四种颜色线性渐变:
int [] colors = {Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW};
float[] position = new float[4];
position[0] = 0f;
position[1] = 0.2f;
position[2] = 0.9f;
position[3] = 1.0f;
// radialGradient = new RadialGradient(450,450,400,Color.RED,Color.GREEN, Shader.TileMode.CLAMP);
radialGradient = new RadialGradient(450,450,400,colors,null, Shader.TileMode.CLAMP);
mPaint.setShader(radialGradient);
canvas.drawCircle(450,450,450,mPaint);
stops数组不为null:
int [] colors = {Color.RED,Color.GREEN,Color.BLUE,Color.YELLOW};
float[] position = new float[4];
position[0] = 0f;
position[1] = 0.2f;
position[2] = 0.9f;
position[3] = 1.0f;
radialGradient = new RadialGradient(450,450,400,colors,position, Shader.TileMode.CLAMP);
mPaint.setShader(radialGradient);
canvas.drawCircle(450,450,450,mPaint);
如果数组多余颜色个数:
4 任意view 点击扩散效果
大致做个小例子,如果需要线上使用需要考虑很多问题,类似ondraw最好不要声明对象等:
@Override
public boolean onTouchEvent(MotionEvent event) {
if (valueAnimator != null && valueAnimator.isRunning()){
valueAnimator.cancel();
}
curx = event.getX();
cury = event.getY();
float maxRadius = 0;
float maxRadius2 = 0;
if ((width -curx) > curx){
maxRadius = width -curx;
}else{
maxRadius = curx;
}
if ((heigth -cury) > cury){
maxRadius2 = heigth -cury;
}else{
maxRadius2 = cury;
}
radius = Math.max(maxRadius, maxRadius2);
valueAnimator = ValueAnimator.ofFloat(1,radius);
valueAnimator.setDuration(2000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
tradius = (Float) animation.getAnimatedValue();
radialGradient = new RadialGradient(curx,cury, tradius,Color.parseColor("#FFFFFFFF"),Color.GREEN, Shader.TileMode.CLAMP);
mPaint.setShader(radialGradient);
invalidate();
}
});
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationCancel(Animator animation) {
super.onAnimationCancel(animation);
mPaint.setShader(null);
tradius = 0;
invalidate();
}
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
mPaint.setShader(null);
tradius = 0;
invalidate();
}
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
}
});
valueAnimator.start();
return super.onTouchEvent(event);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawCircle(curx,cury,tradius,mPaint);
}
替换为多颜色 private int[] colors = {Color.YELLOW, Color.RED, Color.BLUE, Color.GREEN};
android绘图之Paint(1)
android绘图之Canvas基础(2)
Android绘图之Path(3)
Android绘图之drawText绘制文本相关(4)
Android绘图之Canvas概念理解(5)
Android绘图之Canvas变换(6)
Android绘图之Canvas状态保存和恢复(7)
Android绘图之PathEffect (8)
Android绘图之LinearGradient线性渐变(9)
Android绘图之SweepGradient(10)
Android绘图之RadialGradient 放射渐变(11)
Android绘制之BitmapShader(12)
Android绘图之ComposeShader,PorterDuff.mode及Xfermode(13)
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)
Android绘图之贝塞尔曲线简介(15)
Android绘图之PathMeasure(16)
Android 动态修改渐变 GradientDrawable