Java rotate Problem
- Themenstarter Starfoxfs
- Beginndatum
Sempervivum
Erfahrenes Mitglied
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>
