Java rotate Problem

Das ist alles relativ einfach, wenn man richtig macht. So bewegen sich die Kreise nur, wenn man die Maus gedrückt hält:
Code:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Rotate Circle</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        #container {
            width: 100vmin;
            height: 100vmin;
            position: relative;
        }

        #outer-circle {
            width: 100vmin;
            height: 100vmin;
            border-radius: 50%;
            border: 2px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #inner-circle {
            width: 90vmin;
            height: 90vmin;
            border-radius: 50%;
            border: 2px solid black;
            position: absolute;
            left: 5vmin;
            top: 5vmin;
        }

        #marker {
            width: 10px;
            height: 5vmin;
            position: absolute;
            top: 0;
            left: calc(50vmin - 5px);
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="marker"></div>
        <div id="outer-circle"></div>
        <div id="inner-circle"></div>
    </div>
    <script>
        var moveit = false;
        if (window.innerHeight < window.innerWidth)
            var xCenter = yCenter = window.innerHeight * 0.5;
        else
            var xCenter = yCenter = window.innerWidth * 0.5;
        window.addEventListener("mousemove", function (event) {
            if (moveit) {
                var xMouse = event.clientX - xCenter;
                var yMouse = event.clientY - yCenter;
                var radius = Math.hypot(xMouse, yMouse);
                var rad = Math.asin(xMouse / radius);
                if (yMouse > 0) rad = Math.PI - rad;
                var deg = rad * 180 / Math.PI;
                document.getElementById("outer-circle").textContent = rad + " " + deg;
                document.getElementById("container").style.transform = "rotate(" + rad + "rad)";
            }
        });
        var cont = document.getElementById('container');
        cont.addEventListener('mousedown', function (event) {
            moveit = true;
        });
        cont.addEventListener('mouseup', function (event) {
            moveit = false;
        });
    </script>
</body>

</html>
 
Zurück