Java rotate Problem

Starfoxfs

Grünschnabel
Hi zusammen,

ich möchte mit Java ein Div mit einem Background Image mit Mausklick rotieren lassen und zwar endlos.

Problem irgendwie bekomm ich die Variable "angle" nicht zum laufen.

Trage ich unter rotate(30deg) manuell ein funktioniert das Script, trage ich die Variable "angle" ein geht es nicht mehr.

Code:
<script type="text/javascript">
var x = 1;

function rotateImage() {
var angle = (90 * x);
        var img = document.getElementById("myDIV");
        img.style.transform = "rotate(30deg)";

x++;
    }

</script>


So funktioniert es nicht :
Code:
<script type="text/javascript">
var x = 1;

function rotateImage() {
var angle = (90 * x);
        var img = document.getElementById("myDIV");
        img.style.transform = "rotate('angle'deg)";

x++;
    }

</script>
 

Sempervivum

Erfahrenes Mitglied
Du liegst da ein wenig verkehrt mit den Hochkommas und für das Verketten der Variablen mit den Strings brauchst Du ein Pluszeichen:
img.style.transform = "rotate(" + angle + "deg)";

BTW: Du hast dir das falsche Unterforum ausgesucht, Java ist etwas anderes als Javascript.
 

Starfoxfs

Grünschnabel
Hat jemand zufällig ne Ahnung wie ich das ganze so hinbekomme das wenn ich auf das Bild klicke es der Mausposition folgt ?

Code:
function rotateImage() {

var angle = (event.pageY);
        var img = document.getElementById("myDIV");
        img.style.transform = "rotate(" + angle + "deg)";

angle++;
    }
 

Sempervivum

Erfahrenes Mitglied
Falls Du meinst, dass das Bild sich drehen soll, wenn man die Maus bewegt, dann habe ich etwas für dich, was ich vor längerer Zeit mal programmiert habe:
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>
        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) {
            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)";
        });
    </script>
</body>

</html>
Versuche, es auf deine Situation zu übertragen.
 

Sempervivum

Erfahrenes Mitglied
OK, kein großes Problem, das Skript entspr. zu erweitern: Bei Mousedown eine Variable z. B. let turnit = true; auf true setzen und beim Mouseup wieder auf false. Und dann nur drehen, wenn die Variable true ist. Versuche, es umzuändern.
 

Starfoxfs

Grünschnabel
Ich habs mal so probiert:

Code:
<div id="container" onmousedown="true" style="....."></div>


if (document.getElementById("container").mousedown = true) {

document.getElementById("container").style.transform = "rotate(" + rad + "rad)";

}

Geht leider nicht
 

Starfoxfs

Grünschnabel
Ich habs jetzt so das es bei mousedown startet:

Code:
function mouseDown() {
.
.
.
document.getElementById("container").style.transform = "rotate(" + rad + "rad)";

}

aber wie stoppe ich das ganze jetzt bei mouseup o_O
 

Sempervivum

Erfahrenes Mitglied
Was möchtest Du denn genau erreichen: Soll sich das Bild von allein drehen, solange man die Maus gedrückt hält oder soll man durch Bewegen der Maus die Drehung steuern können, wie in meinem Beispiel?
 

Neue Beiträge