JavaScript-如何使用JS的范围滑块旋转对象？-堆栈溢出

顺晟科技

2022-10-19 13:15:06

143

我希望线的每一端都跟随蓝色和红色圆圈，我希望蓝色圆圈向红色圆圈的相反方向移动。我已经知道如何让红色跟随滑块。

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="ass3_part1.js" defer></script>
    <title>CPSC 1045 Assignment 3 Part 1</title>
</head>

<body>
    <h1>CPSC 1045 Assignment 3 Part 1</h1>
    <svg width="350" height="350" style="border:solid 1px black">
        <circle id="top" cx="10" cy="100" r="10" fill="red" />
        <circle id="bottom" cx="340" cy="240" r="10" fill="blue" />
        <line id="connector" x1="10" y1="100" x2="340" y2="240" stroke="black" stroke-width="5px" />
    </svg>
    <br>
    <input class="slider" type="range" id="rangeX" min="10" max="340" value="0" style="width:350px" oninput="move()" >
    
</body>

</html>

JS:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="ass3_part1.js" defer></script>
    <title>CPSC 1045 Assignment 3 Part 1</title>
</head>

<body>
    <h1>CPSC 1045 Assignment 3 Part 1</h1>
    <svg width="350" height="350" style="border:solid 1px black">
        <circle id="top" cx="10" cy="100" r="10" fill="red" />
        <circle id="bottom" cx="340" cy="240" r="10" fill="blue" />
        <line id="connector" x1="10" y1="100" x2="340" y2="240" stroke="black" stroke-width="5px" />
    </svg>
    <br>
    <input class="slider" type="range" id="rangeX" min="10" max="340" value="0" style="width:350px" oninput="move()" >
    
</body>

</html>

顺晟科技：

据我所知，这就是您试图实现的目标:

我尝试遵循与您开始时相同的模式（并尽可能少地修改代码）。我也在代码中添加了一些注释，但这里有一点解释:

几乎是这样，你想水平地将蓝色圆圈向左移动，与红色圆圈向右移动的量相反。因此，当滑块移动时，您需要将蓝色圆圈的x值更新为它的初始x值减去滑块值。对于这条线，因为您只是沿着x轴移动圆，所以只需要将端点的x值更新为您为其相关圆分配的值。

上一篇：JavaScript-如何在角形表单下一篇：JavaScript-<script

网站建设

Html

JavaScript-如何使用JS的范围滑块旋转对象？-堆栈溢出