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

Question

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

这是我想在Feed下方显示的操纵杆类型：

我怎样才能实现它？

Answer 1

一种可能性是使用SVG：

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

这是一个带有类似于你的控制器的演示。点击＆＃34;完整页面＆＃34;按钮，看看它如何增长，并适应父母的宽度（屏幕的20％）缩放没有问题，并保持所有的热点：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将图像映射用于操纵杆按钮。在图像映射中，您可以使用图像作为按钮，您需要定义图像的坐标以使其可单击。您可以参考http://www.w3schools.com/tags/tag_map.asp。要使其响应，您可以使用媒体查询。如需参考，请浏览http://www.w3schools.com/css/css_rwd_mediaqueries.asp