如何在HTML中創建響應式遊戲杆佈局按鈕？

Question

我正在創建Raspberry Pi WiFi控制攝像頭機器人。我爲攝像頭反饋創建了一個響應窗口，但我無法創建操縱桿按鈕來控制我的機器人。

這是操縱桿我想顯示低於進料的類型：

我怎樣才能實現呢？

Answer 1

您可以將圖像映射用於操縱桿按鈕。在圖像映射中，您可以將圖像用作按鈕，您需要定義圖像的座標以使其可點擊。您可以參考http://www.w3schools.com/tags/tag_map.asp。爲了使其響應，您可以使用媒體查詢。僅供參考經過http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

一種可能性是使用SVG：

• 這是一個可縮放的矢量圖像格式（SVG表示可縮放矢量圖形），所以它會適應不同尺寸沒有空間化或得到模糊。
• SVG元素支持交互性和動畫：所以你可以在箭頭和中心按鈕中點擊事件監聽器。
• 它受到所有現代瀏覽器（桌面和移動）的支持。

下面是一個演示，其中的控制器類似於您所擁有的控制器。點擊「全頁面」按鈕來看看它是如何成長並適應於母公司的比例沒有問題，並保持所有熱點的寬度（屏幕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>