javascript - 如何创建用于相机控制的操纵杆

Question

嘿，我正在尝试构建一个易于理解且可供老年人使用的操纵杆。操纵杆需要有 4 个方向:左、右、上和下，中间还有一个暂停按钮。 需要使用此操纵杆来移动相机。 我在网上找到了一个代码，它为我创建了一个 svg 游戏杆。

问题是这个摇杆不太好用，当你按一个方向时，你不知道你是否点击它。 此外，当您点击中心停止操作时，您没有点击反馈。

我正在为我当前的操纵杆寻找替代品或改进品。 我怎样才能改进我目前的 Controller ，这样我就会得到点击 svg 的反馈。我可以在 svg 中创建一个棍子以便我知道我现在指向哪个方向吗？ 如果有人可以帮助我使用这个 Controller ，我会很高兴， 提前致谢。

编辑: 我需要每个箭头和停止按钮的真实视觉反馈。如果需要对当前 svg 进行任何更改，欢迎。

#arrowRight:hover,
#arrowLeft:hover,
#arrowDown:hover,
#arrowUp:hover{
  fill:blue;
}

<div id="joystick" style="width:20%">
  <svg width="100%" height="100%" viewBox="0 0 100 100">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
      </linearGradient>
      <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
      </linearGradient>
      <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(168,168,168);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(239,239,239);stop-opacity:1" />
      </linearGradient>
    </defs>
    <circle cx="50" cy="50" r="50" fill="url(#grad1)" />
    <circle cx="50" cy="50" r="47" fill="url(#grad2)" stroke="black" stroke-width="1.5px" />
    <circle cx="50" cy="50" r="44" fill="url(#grad3)" />
    <circle cx="50" cy="50" r="20" fill="#cccccc" stroke="black" stroke-width="1px"  />
    <path id="arrowUp" d="M50,14 54,22 46,22Z" fill="rgba(0,0,0,0.8)"   />
    <path id="arrowDown" d="M50,86 54,78 46,78Z" fill="rgba(0,0,0,0.8)"  />
    <path id="arrowLeft" d="M14,50 22,54 22,46Z" fill="rgba(0,0,0,0.8)"  />
    <path id="arrowRight" d="M86,50 78,54 78,46Z" fill="rgba(0,0,0,0.8)"  />
  </svg>
</div>

Answer 1

您可以为每个路径添加一个onclick 函数。将方向作为参数发送到此函数。

function click(elem, direction) {
  var arrows = document.getElementsByClassName("arrow");
  //reset all arrows
  for (let i = 0; i < arrows.length; i++) {
    arrows[i].style.fill = "rgba(0,0,0,0.8)";
  }
  //Set the clicked arrow to red
  elem.style.fill = "red";
};

#arrowRight:hover,
#arrowLeft:hover,
#arrowDown:hover,
#arrowUp:hover {
  fill: blue;
}

<div id="joystick" style="width:20%">
  <svg width="100%" height="100%" viewBox="0 0 100 100">
    <defs>
      <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
      </linearGradient>
      <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(240,240,240);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(16,16,16);stop-opacity:1" />
      </linearGradient>
      <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(168,168,168);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(239,239,239);stop-opacity:1" />
      </linearGradient>
    </defs>
    <circle cx="50" cy="50" r="50" fill="url(#grad1)" />
    <circle cx="50" cy="50" r="47" fill="url(#grad2)" stroke="black" stroke-width="1.5px" />
    <circle cx="50" cy="50" r="44" fill="url(#grad3)" />
    <circle cx="50" cy="50" r="20" fill="#cccccc" stroke="black" stroke-width="1px" />
    <path id="arrowUp" class="arrow" d="M50,14 54,22 46,22Z" fill="rgba(0,0,0,0.8)" onclick="click(this, 'up')" />
    <path id="arrowDown" class="arrow" d="M50,86 54,78 46,78Z" fill="rgba(0,0,0,0.8)" onclick="click(this,'down')" />
    <path id="arrowLeft" class="arrow" d="M14,50 22,54 22,46Z" fill="rgba(0,0,0,0.8)" onclick="click(this,'left')" />
    <path id="arrowRight" class="arrow" d="M86,50 78,54 78,46Z" fill="rgba(0,0,0,0.8)" onclick="click(this,'right')" />
  </svg>
</div>