用于相机的 javascript 操纵杆

Question

嘿，我需要为相机控件创建一个操纵杆。 操纵杆需要能够向左、右、上、下四个方向移动，其中两个具有停止功能。 我在网上搜索了几个小时，最后我找到了一个叫做 nipplejs 的东西。 我已将 nipplejs 的代码附加到此线程：

var radius = 100;

var sampleJoystick = {
    mode: 'static',
    position: {
      left: '50%',
      top: '50%'
    },
    size: radius*2,
    color: 'black'
};

var joystick;
var position;
joystick = nipplejs.create(sampleJoystick);
joystick.on('start end', function(evt, data) {
  position = data;
}).on('move', function(evt, data) {
  position = data;
}).on('dir:up plain:up dir:left plain:left dir:down' +
      'plain:down dir:right plain:right',
      function(evt, data) {
  //position=data;
}
     ).on('pressure', function(evt, data) {
  position=data;
});

<script src="//yoannmoinet.github.io/nipplejs/javascripts/nipplejs.js"></script>
<div id="zone_joystick">
</div>

乍一看，它看起来像一个完美的库，但再看一遍，我发现我的操纵杆上没有方向指示器，我无法用这个操纵杆实现停止行为，也不是直观的控制对于将使用该软件的老年人。

我正在寻找具有上述功能的面板控件的替代解决方案。

功能： 可转向 4 个不同方向的操纵杆：左、右、上和下。 操纵杆也有停止功能。

Answer 1

您必须先连接到硬件，然后才能读取其输入。您是否考虑过使用浏览器原生 GamePad API？但这并不适用于所有浏览器。

https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API