前言
在我的上一篇博客中,我讲解了如何绘制一条波浪线,今天我们的目的是,绘制一条随心所欲的波浪线,什么叫随心所欲的波浪线呢,由于上篇主要讲解的是绘制波浪线的原理,不过就有人提问了,万一我想要的波浪线长度小于屏幕长度怎么办,那么今天我们就来讲解下,怎么绘制一条长度可以自己把控的波浪线,先看看效果图吧。
拓展:
我们可以有两种方式实现这个效果,一个简单点,一个复杂点,先说说复杂的。
方式一
使用方式一,我们需要准备两个知识点
在Activity中绘制图形
在实现这个波浪线之前,我们需要知道一件事情,在Android中,除了通过自定义view的时候,我们会用到canvas,其他地方好像就见不到canvas了,现在我们先做一件事情,不在onDraw中使用canvas,在activity中使用canvas,怎么实现呢。
主要还是用到canvas的构造方法,我们可以使用canvas的Canvas canvas = new Canvas(bitmap);
构造方法,将图像绘制在一张bitmap上面,然后将这个bitmap设置给ImageView,这个bitmap既可以是正常的普通的bitmap,也可以是我们通过代码得到的一张空白的bitmap,那么直接看代码吧。
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 创建空白的bitmap作为画布
Bitmap bitmap = Bitmap.createBitmap(1080, 1920, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.RED);
canvas.drawRect(new RectF(100,100,300,300),paint);
ImageView imageView = findViewById(R.id.imageview);
imageView.setImageBitmap(bitmap);
}
}
效果也很简单
设置shader
现在我们可以跳出自定义view中的onDraw方法了,即便不在onDraw中,我们照样可以绘制图形。
那么,我们首先通过不借助onDraw的方式,绘制一条波浪线,再将这个bitmap作为paint的shader,然后使用这个paint去绘制一个矩形,等等,效果好像已经实现了。
先上代码吧
public class WaveView extends View {
private Paint mPaint;
// view宽度
private int width;
// view高度
private int height;
// 波浪高低偏移量
private int offset = 20;
// X轴,view的偏移量
private int xoffset = 0;
// view的Y轴高度
private int viewY = 0;
// 波浪速度
private int waveSpeed = 50;
private ValueAnimator animator;
public WaveView(Context context) {
super(context);
init(context);
}
public WaveView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context) {
mPaint = new Paint();
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
width = wm.getDefaultDisplay().getWidth();
height = wm.getDefaultDisplay().getHeight();
animator = new ValueAnimator();
animator.setFloatValues(0, width);
animator.setDuration(waveSpeed * 20);
animator.setRepeatCount(-1);