JavaScript虚拟摇杆实践

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

先看一下实践Demo效果：

Untitled.gif

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

<div id="zone_joystick"></div>

<script type="text/javascript" src="./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 + '个单位');
}

看Demo代码地址点击这里