uniapp 十字扫描
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) }
}性能优化建议
对于需要高频重绘的场景，建议：
- 使用requestAnimationFrame替代setTimeout
- 对canvas使用离屏渲染
- 避免在draw函数中创建新对象
- 合理设置canvas尺寸，避免过大
以上方案可根据实际需求调整动画速度、线条样式和颜色等参数。CSS方案适合简单场景，canvas方案可实现更复杂的扫描效果和交互逻辑。
