HarmonyOS 鸿蒙Next中分享一个自定义的图片滑动验证控件的实现

HarmonyOS 鸿蒙Next中分享一个自定义的图片滑动验证控件的实现 我们在功能开发的过程中，难免遇到图片验证码的需求，比如说登录、抢票等场景。通常的方案一般有两种：

1. 获取云端图片和滑块，云端验证正确性。
2. 端侧静态图片，完成滑动端侧验证。

下面主要介绍下第二种方案的实现：

先看效果图：

• 准备一张验证码图片
• 生成拼图块路径（固定一种形态，带凸起/凹陷）

function generatePuzzlePath() {
  const s = this.puzzleSize;
  const r = 10; // 圆角
  const tab = 12; // 凸起/凹陷宽度
  // 形状：上边有凸起，右边有凹陷，下边直线，左边直线
  this.puzzlePath = `
    M ${r} 0
    L ${s / 2 - tab / 2} 0
    Q ${s / 2} -${tab} ${s / 2 + tab / 2} 0
    L ${s - r} 0
    Q ${s} 0 ${s} ${r}
    L ${s} ${s / 2 - tab / 2}
    Q ${s + tab} ${s / 2} ${s} ${s / 2 + tab / 2}
    L ${s} ${s - r}
    Q ${s} ${s} ${s - r} ${s}
    L ${r} ${s}
    Q 0 ${s} 0 ${s - r}
    L 0 ${r}
    Q 0 0 ${r} 0 Z
  `;
}

• 使用代码 随机生成拼图块位置，参考代码：

function generateRandomPuzzlePosition() {
  const margin = 8;
  const minX = margin;
  const maxX = this.containerWidth - this.puzzleSize - margin;
  const minY = margin;
  const maxY = this.containerHeight - this.puzzleSize - margin;
  this.puzzleX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;
  this.puzzleY = Math.floor(Math.random() * (maxY - minY + 1)) + minY;
  this.sliderPosition = 0;
  this.isVerified = false;
}

• 滑动条滑动

Slider({
  value: this.sliderPosition,
  min: 0,
  max: this.containerWidth - this.puzzleSize,
  step: 1
})
  .width(this.containerWidth)
  .onChange((value: number, mode: SliderChangeMode) => {
    this.sliderPosition = value;
    if (mode == SliderChangeMode.End) {
      this.verifyPosition();
    }
  })

• 验证滑块是否对齐

function verifyPosition() {
  if (Math.abs(this.sliderPosition - this.puzzleX) <= this.tolerance) {
    this.isVerified = true;
  } else {
    this.isVerified = false;
  }
}

示例代码逻辑：

function build() {
  Column() {
    // 背景图片和拼图缺口
    Stack() {
      // 背景图片
      Image(this.backgroundImage1)
        .width(this.containerWidth)
        .height(this.containerHeight)
        .objectFit(ImageFit.Cover)
        .borderRadius(12)

      // 只在拼图块位置有效时渲染缺口和滑块
      if (this.puzzleX > 0 && this.puzzleY > 0) {
        // 拼图缺口阴影
        Path()
          .width(this.puzzleSize)
          .height(this.puzzleSize)
          .commands(this.puzzlePath)
          .fill('#80FFFFFF')
          .shadow({
            radius: 6,
            color: '#00000040',
            offsetX: 2,
            offsetY: 2
          })
          .position({ x: this.puzzleX, y: this.puzzleY })

        // 滑块
        Stack() {
          // 滑块图片内容
          Image(this.backgroundImage1)
            .width(this.containerWidth)
            .height(this.containerHeight)
            .objectFit(ImageFit.Cover)
            .translate({
              x: this.containerWidth / 2 - this.puzzleX - this.getUIContext().px2vp(this.puzzleSize) / 2,
              y: this.containerHeight / 2 - this.puzzleY - this.getUIContext().px2vp(this.puzzleSize) / 2
            })// 只显示拼图块区域
            .clip(new Path({
              commands: this.puzzlePath
            }).position({ x: this.puzzleX, y: this.puzzleY }))

          // 滑块白色边框
          Path()
            .width(this.getUIContext().px2vp(this.puzzleSize))
            .height(this.getUIContext().px2vp(this.puzzleSize))
            .commands(this.puzzlePath)
            .fill('rgba(0,0,0,0)')
            .stroke('#ffffff')
            .strokeWidth(2)
        }
        .width(this.getUIContext().px2vp(this.puzzleSize))
        .height(this.getUIContext().px2vp(this.puzzleSize))
        .position({ x: this.sliderPosition, y: this.puzzleY })
        .gesture(
          PanGesture()
            .onActionUpdate((event: GestureEvent) => {
              const newPosition = this.sliderPosition + event.offsetX;
              this.sliderPosition = Math.max(0, Math.min(newPosition, this.containerWidth - this.puzzleSize));
            })
            .onActionEnd(() => {
              this.verifyPosition();
            })
        )
      }
    }
    .width(this.containerWidth)
    .height(this.containerHeight)
    .margin({ bottom: 24 })

    // 滑动条
    Slider({
      value: this.sliderPosition,
      min: 0,
      max: this.containerWidth - this.puzzleSize,
      step: 1
    })
      .width(this.containerWidth)
      .onChange((value: number, mode: SliderChangeMode) => {
        this.sliderPosition = value;
        if (mode == SliderChangeMode.End) {
          this.verifyPosition();
        }
      })

    // 验证结果
    if (this.isVerified) {
      Text('✅ 验证成功！')
        .fontSize(18)
        .fontColor('#4CAF50')
        .margin({ top: 16 })
    } else {
      Text('向右滑动滑块完成拼图')
        .fontSize(16)
        .fontColor('#666666')
        .margin({ top: 16 })
    }
  }
  .width('100%')
  .alignItems(HorizontalAlign.Center)
}