1.安装

npm install nipplejs --save

2.引用 

import nipplejs from "nipplejs";

3.使用

Html:

<div id="joystick_zone"></div>

4.选项

options.mode默认为“动态”。

有三种模式是可能的：

'dynamic'  (离开屏幕后就消失)
  • 每次新触摸都会创建一个新的操纵杆。
  • 操纵杆在释放时会被破坏。
  • 可以是多点触控。
'semi'   (离开屏幕后还保留在原处，移动到别处时切换当前的摇杆的位置)
  • 每次新触摸都会创建新的操纵杆，比以前创建的任何操纵杆都更远。options.catchDistance
  • 操纵杆在释放时会淡出，但不会销毁。
  • 当在内部进行触摸时，会立即触发新方向。options.catchDistance
  • 当在外部进行触摸时，前一个操纵杆将被破坏并创建一个新操纵杆。options.catchDistance
  • 不能是多点触控。
'static'   （固定不动）
  • 操纵杆立即定位在 上。options.position
  • 每个区域一个操纵杆。
  • 每一次新的触摸都会触发一个新的方向。
  • 不能是多点触控。

 Js:

//配置项，我暂时用到的是这些，有其他需要可以添加
setTimeout(function () {
  var options = {
    zone: document.getElementById("joystick_direction"),
    mode: "static",
    position: { left: "50%", top: "50%" },//在容器内垂直居中显示
    color: "gray",
  };

  var manager = nipplejs.create(options);

//以下为监听事件

// 滑动摇杆的事件
  manager.on("move", function (evt, data) {
    var dd = data.vector; //摇杆位置
    var dse = "2" + "_" + dd.x + "_" + dd.y;//摇杆所在x轴和y轴的位置
    sendMessage(dse);//移动摇杆，把位置传给后台，后台根据位置做出反馈并移动。
  });


//停止滑动摇杆的事件 
  manager.on("end", function (evt, data) {
    var dss = "2" + "_" + 0 + "_" + 0;
    sendMessage(dss);//停止摇杆后，摇杆位置归0传给后台，后台根据位置停止移动。
  });

}, 100);

官方文档：

http://yoannmoinet.github.io/nipplejs/

# vue.js # 前端 # javascript
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

一文解读GaussDB(DWS)监控运维诊断优化能力

avatar 华为开发者空间
cover

GaussDB技术解读——GaussDB架构介绍（四）

avatar 华为开发者空间
cover

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间