uniapp摇杆如何实现虚拟摇杆功能

在uniapp中如何实现虚拟摇杆功能？需要监听触摸事件并控制角色移动，但不太清楚具体怎么处理触摸区域和摇杆拖动的逻辑。有没有完整的示例代码或现成的组件可以直接使用？最好能兼容H5和APP平台。

2 回复

在uniapp中实现虚拟摇杆，可通过canvas绘制摇杆背景和摇杆点，监听touch事件获取触摸位置，计算摇杆偏移角度和距离，控制角色移动。


在 UniApp 中实现虚拟摇杆功能，可以通过监听触摸事件和动态绘制摇杆位置来实现。以下是实现步骤和示例代码：

实现思路

  1. 布局结构：使用 view 组件作为摇杆容器和摇杆按钮。
  2. 触摸事件：通过 @touchstart、@touchmove、@touchend 监听用户操作。
  3. 位置计算：根据触摸点坐标，计算摇杆移动方向和距离，限制在设定范围内。
  4. 数据输出：将摇杆方向（如角度）和力度（如距离比例）传递给其他逻辑使用。

示例代码

<template>
  <view class="joystick-container">
    <!-- 摇杆背景 -->
    <view class="joystick-bg">
      <!-- 摇杆按钮 -->
      <view 
        class="joystick-btn" 
        :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      position: { x: 0, y: 0 }, // 摇杆按钮位置
      maxDistance: 40, // 最大移动距离（摇杆半径）
      isTouching: false
    };
  },
  methods: {
    onTouchStart(e) {
      this.isTouching = true;
      this.updatePosition(e);
    },
    onTouchMove(e) {
      if (!this.isTouching) return;
      this.updatePosition(e);
    },
    onTouchEnd() {
      this.isTouching = false;
      // 松开后复位
      this.position = { x: 0, y: 0 };
      // 可在此触发停止事件
      this.$emit('change', { angle: 0, power: 0 });
    },
    updatePosition(e) {
      const touch = e.touches[0];
      // 获取摇杆容器位置（需在onReady中获取实际布局）
      const query = uni.createSelectorQuery().in(this);
      query.select('.joystick-bg').boundingClientRect(data => {
        const centerX = data.left + data.width / 2;
        const centerY = data.top + data.height / 2;
        
        // 计算相对中心点的偏移
        let deltaX = touch.clientX - centerX;
        let deltaY = touch.clientY - centerY;
        
        // 限制在圆形范围内
        const distance = Math.sqrt(deltaX ** 2 + deltaY ** 2);
        if (distance > this.maxDistance) {
          deltaX = (deltaX / distance) * this.maxDistance;
          deltaY = (deltaY / distance) * this.maxDistance;
        }
        
        this.position = { x: deltaX, y: deltaY };
        
        // 计算角度（0-360度）和力度（0-1）
        const angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
        const power = distance / this.maxDistance;
        this.$emit('change', { angle, power });
      }).exec();
    }
  }
};
</script>

<style>
.joystick-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.joystick-bg {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #eee;
  position: relative;
}
.joystick-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #007AFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

使用说明

  • 将上述代码放入组件中，通过 @change 事件接收摇杆数据。
  • angle 表示方向角度（-180° 到 180°），power 表示推动力度（0 到 1）。
  • 摇杆会在触摸超出范围时自动限制在圆形区域内。

注意事项

  • 布局位置计算需在组件渲染完成后进行（使用 onReady 生命周期优化）。
  • 可根据实际需求调整摇杆大小、样式和灵敏度。

通过以上代码，即可在 UniApp 中实现基础的虚拟摇杆功能，适用于游戏或遥控类应用。

回到顶部