Question

嘿，我正在努力建造一个很好理解并可供长者使用的操纵杆。操纵杆需要有4个方向：左，右，上，下，中间还有一个暂停按钮。该操纵杆需要用于移动相机。我在网上找到了一个代码，为我创建了一个svg操纵杆。

问题是这个操纵杆不易使用，当你按下方向时，你不知道你是否点击它。此外，当您单击停止操作的中心时，您没有点击的费用。

我正在寻找替代或改进我目前的操纵杆。如何改进我当前的控制器，这样我就可以获得点击svg的反馈。我可以在svg中创建一个棒，这样我就知道我现在指向哪个方向？如果有人可以帮助我使用这个控制器，我会很高兴，提前谢谢。

修改我需要为每个箭头和停止按钮提供真实的视觉反馈。如果当前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>

如何为摄像机控制创建操纵杆

1 个答案: