当前位置：首页 > uni-app

uniapp 十字扫描

2026-02-06 17:44:28uni-app

uniapp 十字扫描实现方法

在uniapp中实现十字扫描效果，可以通过CSS动画和canvas绘制两种方式完成。以下是具体实现方案：

CSS动画方案

创建十字线样式，使用animation实现扫描动画效果：

.scan-line {
  position: absolute;
  width: 100%;
  height: 1px;
  background: rgba(0, 255, 0, 0.5);
  animation: scan 2s linear infinite;
}
.scan-vline {
  position: absolute;
  width: 1px;
  height: 100%;
  background: rgba(0, 255, 0, 0.5);
  animation: scanv 2s linear infinite;
}

@keyframes scan {
  0% { top: 0 }
  100% { top: 100% }
}
@keyframes scanv {
  0% { left: 0 }
  100% { left: 100% }
}

Canvas绘制方案

通过uni.createCanvasContext创建画布上下文，动态绘制扫描线：

let ctx = uni.createCanvasContext('scanCanvas');
let pos = 0;
function drawScan() {
  ctx.clearRect(0, 0, 300, 300);
  ctx.setStrokeStyle('#00ff00');
  ctx.setLineWidth(1);

  // 绘制水平线
  ctx.beginPath();
  ctx.moveTo(0, pos);
  ctx.lineTo(300, pos);
  ctx.stroke();

  // 绘制垂直线
  ctx.beginPath();
  ctx.moveTo(pos, 0);
  ctx.lineTo(pos, 300);
  ctx.stroke();

  ctx.draw();
  pos = (pos + 2) % 300;
  setTimeout(drawScan, 16);
}

组件化实现

可以封装为可复用的组件：

<template>
  <view class="scan-container">
    <canvas 
      canvas-id="scanCanvas" 
      class="scan-canvas"
      @click="handleClick">
    </canvas>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('scan');
    }
  }
}
</script>

增强交互效果

添加扫描边框和脉冲效果：

.scan-border {
  border: 2px solid rgba(0, 255, 0, 0.3);
  animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 5px rgba(0,255,0,0.3) }
  to { box-shadow: 0 0 20px rgba(0,255,0,0.7) }
}

性能优化建议

对于需要高频重绘的场景，建议：