6～7月的一個小任務(wù)是實(shí)現(xiàn)一個虛擬搖桿控制無人機(jī)，在github搜一下發(fā)現(xiàn)有一個# nipplejs，用它可以快速的實(shí)現(xiàn)一個虛擬搖桿的功能。

先看一下實(shí)踐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 參數(shù)說明
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在這個實(shí)踐的Demo中只用到 zone、color、size、mode、position，下面對nipplejs進(jìn)行簡單的封裝，取名叫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中是設(shè)置backgroundColor，為了讓我們樣式不被覆蓋。所以設(shè)置一個讓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，當(dāng)distance到最大值就不會觸發(fā)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:無人機(jī)向 => ' + angle + '移動' + distance + '個單位');
}

看Demo代碼地址點(diǎn)擊這里