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
