<p>一大早起床就看到推送一篇文章，关于仿斗鱼web端的滑动验证码，看了一下实现，挺有趣的，便自己顺着思路撸一遍，改了一点实现和动画什么的，顺带巩固一下绘制的代码。</p>    <p>先看一下效果图</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/08dece50fe95bf58e635042dc0257ddf.gif"></p>    <p style="text-align:center">效果图</p>    <p>效果还是不错的。</p>    <p>用法，SlideValidationView 是继承自ImageView，所以验证码图片直接set就行。</p>    <pre>  <code class="language-java">SeekBar seekBar;  SlideValidationView slideValidationView;  slideValidationView = (SlideValidationView) findViewById(R.id.yzm);  // 设置监听器，判断验证成功失败时回调  slideValidationView.setListener(new SlideListener() {          @Override          public void onSuccess() {                  Toast.makeText(MainActivity.this, "验证成功", Toast.LENGTH_SHORT).show();          seekBar.setProgress(0);      }      @Override      public void onFail() {          Toast.makeText(MainActivity.this, "验证失败", Toast.LENGTH_SHORT).show();          seekBar.setProgress(0);      }  });  seekBar = (SeekBar) findViewById(R.id.seekBar);  seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {      @Override      public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {          // 更新验证滑块的位置          slideValidationView.setOffsetX(progress);      }      @Override      public void onStartTrackingTouch(SeekBar seekBar) {    }      @Override      public void onStopTrackingTouch(SeekBar seekBar) {          // 进行验证码的判断          slideValidationView.deal();      }  });</code></pre>    <p>下面说一下实现，也可以选择去看代码，代码里面注释应该很全了。代码链接： <a href="/misc/goto?guid=4959733342010207755" rel="nofollow,noindex">代码</a> 。看得喜欢关系点个star。</p>    <p>第一步：画拼图的path，上下左右四个半圆随机凹凸</p>    <pre>  <code class="language-java">/**   * 创建验证区域path   */  private void creatValidationPath() {      validationPath = new Path();      if (validationSize == 0) {          validationSize = width/6;      }      circleSize = validationSize / 3;      startX = new Random().nextInt(width - validationSize * 2 - circleSize * 2 - 10) + circleSize + validationSize + 10;      startY = new Random().nextInt(height - validationSize - circleSize * 2) + circleSize;      // 从左上画path到右上      validationPath.moveTo(startX, startY);      validationPath.lineTo(startX + circleSize, startY);      creatRandomArc(validationPath, startX + circleSize, startY, false, 0);      validationPath.lineTo(startX + validationSize, startY);      // 从右上画path到右下      validationPath.lineTo(startX + validationSize, startY + circleSize);      creatRandomArc(validationPath, startX + validationSize, startY + circleSize, true, 0);      validationPath.lineTo(startX + validationSize, startY + validationSize);      // 从右下画path到左下      validationPath.lineTo(startX + circleSize * 2, startY + validationSize);      creatRandomArc(validationPath, startX + circleSize, startY + validationSize, false, 1);      validationPath.lineTo(startX, startY + validationSize);      // 从左下画path到左上      validationPath.lineTo(startX, startY + circleSize * 2);      creatRandomArc(validationPath, startX, startY + circleSize, true, 1);      validationPath.lineTo(startX, startY);  }  /**   * 验证区域path四条边的半圆弧度   * @param validationPath 要操作的path   * @param beginX         弧度的起始x坐标（取弧度的左边坐标，即弧度的两点，位于左边的那个坐标）   * @param beginY         弧度的起始y坐标（取弧度的上边坐标，即弧度的两点，位于上边的那个坐标）   * @param isleftRight    是否左右边   * @param type           右上边为0，左下边为1   */  private void creatRandomArc(Path validationPath, int beginX, int beginY, boolean isleftRight, int type) {      RectF rectF;      // 是左右边还是上下边      if (isleftRight) {          rectF = new RectF(beginX - circleSize / 2, beginY, beginX + circleSize / 2, beginY + circleSize);      } else {          rectF = new RectF(beginX, beginY - circleSize / 2, beginX + circleSize, beginY + circleSize / 2);      }      // 随机得到是突出还是凹入半圆，针对角度问题，用type来解决      if (new Random().nextInt(10) > 5) {          // 突出半圆          if (isleftRight) {              validationPath.arcTo(rectF, -90 + type * 180, 180);          } else {              validationPath.arcTo(rectF, -180 + type * 180, 180);          }      } else {          // 凹入半圆          if (isleftRight) {              validationPath.arcTo(rectF, -90 + type * 180, -180);          } else {              validationPath.arcTo(rectF, -180 + type * 180, -180);          }      }  }</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fcd89ff4ebd663cff31924c55e03dfc3.png"></p>    <p style="text-align:center">绘制拼图path</p>    <p>第二步：绘制阴影（设置画笔的setMaskFilter，应该要为这个view关闭硬件加速，否则阴影没作用）</p>    <pre>  <code class="language-java">// 单独为这个view关闭硬件加速  setLayerType(LAYER_TYPE_SOFTWARE, null);</code></pre>    <p>阴影</p>    <pre>  <code class="language-java">// 验证块的阴影画笔  Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);  mPaint.setColor(0x99000000);  // 设置画笔遮罩滤镜mPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.SOLID));</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/badbb499c646fea1f8b27cc11c321b44.png"></p>    <p style="text-align:center">绘制阴影</p>    <p>第三步：绘制滑块</p>    <p>因为上面我们得到了拼图的path，我们就创建一个bitmap，在里面分别绘制验证码原图和这个path，通过setXfermode（不了解的可以去搜搜），取得他们的交集，即为我们的滑块，由此我们通过一个变量来控制滑块的绘制x轴就行了</p>    <pre>  <code class="language-java">// 以控件宽高 create一块bitmap  Bitmap tempBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);  // 把创建的bitmap作为画板  Canvas mCanvas = new Canvas(tempBitmap);  // 抗锯齿  mCanvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG));  // 绘制用于遮罩的圆形  mCanvas.drawPath(mask, mMaskPaint);  // 设置遮罩模式(图像混合模式)  mMaskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  // 考虑到scaleType等因素，要用Matrix对Bitmap进行缩放  mCanvas.drawBitmap(mBitmap, getImageMatrix(), mMaskPaint);</code></pre>    <p>第四步</p>    <p>绘制滑块的阴影，这里面有个api我也是第一次接触，bitmap.extractAlpha()拿到该bitmap的图片大小等信息，但只有透明度没有颜色，返回一张新的bitmap。我们通过设置画笔的阴影来绘制新的bitmap即可绘制出滑块的阴影</p>    <pre>  <code class="language-java">// extractAlpha拿到原bitmap的区域，只有透明度Bitmap   mMaskShadowBitmap = mMaskBitmap.extractAlpha();</code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f0f6d4ff940cc52260b2e7313c884e97.png"></p>    <p style="text-align:center">绘制滑块和阴影</p>    <p>一些方法</p>    <table>     <thead>      <tr>       <th>方法名</th>       <th>用处</th>      </tr>     </thead>     <tbody>      <tr>       <td>setOffsetX(float howMuch)</td>       <td>设置滑块移动距离(@param howMuch 0-100内数字，表示百分比)</td>      </tr>      <tr>       <td>restore()</td>       <td>重置验证区域位置（重新生成拼图path）</td>      </tr>      <tr>       <td>deal()</td>       <td>判断是否成功</td>      </tr>      <tr>       <td>setListener(SlideListener listener)</td>       <td>设置监听器</td>      </tr>     </tbody>    </table>    <p> </p>    <p> </p>