Android绘制波浪线 进阶

前言

在我的上一篇博客中，我讲解了如何绘制一条波浪线，今天我们的目的是，绘制一条随心所欲的波浪线，什么叫随心所欲的波浪线呢，由于上篇主要讲解的是绘制波浪线的原理，不过就有人提问了，万一我想要的波浪线长度小于屏幕长度怎么办，那么今天我们就来讲解下，怎么绘制一条长度可以自己把控的波浪线，先看看效果图吧。

拓展：

我们可以有两种方式实现这个效果，一个简单点，一个复杂点，先说说复杂的。

---

方式一

使用方式一，我们需要准备两个知识点

1. Android绘制波浪线
2. Android之Shader完全理解指南

在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);