JavaScript虚拟摇杆实践

6～7月的一个小任务是实现一个虚拟摇杆控制无人机，在github搜一下发现有一个# nipplejs，用它可以快速的实现一个虚拟摇杆的功能。

先看一下实践Demo效果：

Untitled.gif

1. 介绍一下# nipplejs使用(详情介绍请看文档)

<div id="zone_joystick"></div><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./nipplejs.min.js"></script><script type="text/javascript">
    var options = {        zone: document.getElementById('zone_joystick');
    };    var manager = nipplejs.create(options);</script>-----
/* options 参数说明
var options = {
    zone: Element,                  // active zone
    color: String,
    size: Integer,
    threshold: Float,               // before triggering a directional event
    fadeTime: Integer,              // transition time
    multitouch: Boolean,
    maxNumberOfNipples: Number,     // when multitouch, what is too many?
    dataOnly: Boolean,              // no dom element whatsoever
    position: Object,               // preset position for 'static' mode
    mode: String,                   // 'dynamic', 'static' or 'semi'
    restJoystick: Boolean,
    restOpacity: Number,            // opacity when not 'dynamic' and rested
    catchDistance: Number           // distance to recycle previous joystick in
                                    // 'semi' mode
}; */

options在这个实践的Demo中只用到  zone、color、size、mode、position，下面对nipplejs进行简单的封装，取名叫Joystick:

function Joystick(opt) {  if (!opt.zone) return;  var disabledColor = opt && opt.disabledColor || true;  this.options = {    mode: opt && opt.mode || 'static',    size: opt && opt.size || 300,    // color在nipplejs中是设置backgroundColor，为了让我们样式不被覆盖。所以设置一个让background-color不成功的值
    color: disabledColor ? 'ddd' : (opt && opt.color || '#eee'),    position: opt && opt.position || {      left: '50%',      top: '50%'
    },    zone: opt && opt.zone
  };  this.distance = 0;  this.angle = null;  this.time = null;
}

Joystick.prototype.init = function() {  var manager = nipplejs.create(this.options);  this.manager = manager;  this._on();  return this;
}

Joystick.prototype._on = function() {  var me = this;  this.manager
    .on('start', function (evt, data) {
      me.time = setInterval(() => {
        me.onStart && me.onStart(me.distance,me.angle);
      }, 100);
    })
    .on('move', function (evt, data) {      // direction有不存在的情况 
      if (data.direction) {
        me.angle = data.direction.angle;
        me.distance = data.distance;
      }
    })
    .on('end', function (evt, data) {
      clearInterval(me.time);
      me.onEnd && me.onEnd();
    });
}

使用nipplejs，当distance到最大值就不会触发move事件，但我希望开始使用摇杆到松开都之前都能获取angle和distance。于是就在start中通过setInterval一直获取angle和distance。通过简单的封装，使初始化一个虚拟摇杆更简单：

function select(val) {  return document.querySelector(val);
}new Joystick({  zone: select('#left')
})
.init()
.onStart = function(distance, angle) {  console.log('Left:无人机向 => ' + angle + '移动' + distance + '个单位');
}

作者：内孤
链接：https://www.jianshu.com/p/d3a22a02cf02