vue写控制摇杆（nipplejs虚拟摇杆）
默认为“动态”。'dynamic'
·
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);官方文档：
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)