主页 / 问题 / 1100176
Accepted
BERTOLDO
Asked:2020-03-26 21:42:57 +0000 UTC2020-03-26 21:42:57 +0000 UTC

JS 上的虚拟操纵器（操纵杆）

  • 772

项目中需要创建一个摇杆模拟器，在机械手的某个位置，根据X、Y坐标向服务器发送某个命令。

左上角的灰色方块是机械手本身

左上角的灰色方块是机械手本身。它应该在深灰色区域的中心，初始值 X:0 Y:0

使用鼠标进行移动（点 -> 单击 -> 拖动到该区域中的任意点）

请告诉我，从哪里开始？由于我是 JS 的初学者，完全没有经验，谷歌搜索后发现他们使用的是 jQuery 框架，但不完全清楚该采用哪些方法。

html:

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Joystick</title>
  <script src="joy.js"></script>
  <script src="jquery/jquery-1.9.1.js"></script>
  <script src="jquery/jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css">
 </head>

 <body>

  <div id="joyStick" class="joyStick">
    <div class="joyManipulator"></div>
  </div>

  <div id = "panel">
    <center>
    <p>
    <input type="text" value="0" id="ox" /><br />
    <input type="text" value="0" id="oy" /><br /></p>
    <button id = "reset">reset</button><p>
    </center>
  </div>

 </body>
</html>

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x:hidden;
}

body{
    background-color: #2e2e2e;
}

.joyStick {
    margin: 500px auto;
    margin-bottom: 20px;
    width:200px; 
    height:200px; 
    background:#222121; 
    border:1px solid black;
    border-radius: 10px;
    border-width: 1px;
    position:relative;
}

.joyManipulator {
    width:40px;
    height:40px;
    position:absolute;
    border-radius:10px;
    background:rgb(206, 206, 206);
    cursor:pointer;
}

#panel {
    margin: 0 auto;
    width: 200px;
    background-color: #222121;
    border:1px solid black;
    border-radius: 10px;
    border-width: 1px;
}

#reset {
    padding: 10px;
    color: rgb(255, 255, 255);
    font-family: Arial;
    border:1px solid rgb(255, 255, 255);
    border-width: 1px;
    background-color: rgb(47, 47, 47);
    cursor: pointer;
}

#ox, #oy {
    margin: 0 auto;
    padding: 5px;
}
javascript

1 个回答

  1. Best Answer

    由于我是JS新手，我完全没有经验

    您需要学习 JS 的基础知识。您可以使用 getBoundingClientRect()

    实现示例：

    • codepen.io/nathantaylor/pen/QdpOyB

    • codepen.io/dev357/pen/ldaKx

    • 1

相关问题