如何在 html5 中制作具有 1x1 输出的动态方形操纵杆 [关闭]

Question

我正在尝试制作一个具有正方形形式的动态操纵杆，像正方形一样工作，具有圆形输出并且每个方向的最大输出为 1。我制作了一些概念图：

[](i.stack.imgur.com/n8zyW.png)
[](i.stack.imgur.com/gANkM.png)
[](i.stack.imgur.com/g43bP.png)

操纵杆是半透明的很重要

我试过使用 nipple.js，但不知道如何让可拖动的东西留在背景区域内，也不知道如何让它变成正方形。这是我使用的代码：

var joy = nipplejs.create({
  color: "#000000",
  shape: "square"
});