css - 如何在 HTML 中创建响应式操纵杆布局按钮？

Question

我正在创建 Raspberry Pi WiFi 控制的网络摄像头机器人。我已经为网络摄像头创建了一个响应窗口，但我无法创建操纵杆按钮来控制我的机器人。

这是我想在提要下方显示的操纵杆类型:

我怎样才能实现它？

Answer 1

一种可能是使用 SVG:

• 它是一种可缩放的矢量图像格式(SVG 代表可缩放矢量图形)，因此它可以适应不同的尺寸而不会像素化或变得模糊。
• SVG 元素支持交互性和动画:因此您可以在箭头和中心按钮中设置点击事件监听器。
• 所有现代浏览器(桌面和移动)都支持它。

这是一个演示，其中的 Controller 与您拥有的 Controller 类似。单击“整页”按钮以查看它如何增长并适应父级的宽度(屏幕的 20%)缩放没有问题并保持所有热点:

<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" onclick="alert('CENTER');" />
    <path d="M50,14 54,22 46,22Z" fill="rgba(0,0,0,0.8)" onclick="alert('UP');" />
    <path d="M50,86 54,78 46,78Z" fill="rgba(0,0,0,0.8)" onclick="alert('DOWN');" />
    <path d="M14,50 22,54 22,46Z" fill="rgba(0,0,0,0.8)" onclick="alert('LEFT');" />
    <path d="M86,50 78,54 78,46Z" fill="rgba(0,0,0,0.8)" onclick="alert('RIGHT');" />
  </svg>
</div>