6~7月的一个小任务是实现一个虚拟摇杆控制无人机,在github搜一下发现有一个# nipplejs,用它可以快速的实现一个虚拟摇杆的功能。
先看一下实践Demo效果:
Untitled.gif
介绍一下# 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 + '个单位'); }
作者:内孤
链接:https://www.jianshu.com/p/d3a22a02cf02