Probleme bei der Berechnung der Rotationsgrade

Question

Ich habe ein paar mathematische Probleme in meinem Code, die ich nicht herausfinden kann.

Wenn du auf einen der roten Kreise drückst, sollte er den nächsten Pfad nehmen (links oder rechts) und nach unten drehen, es funktioniert irgendwie, aber es gibt ein paar Probleme damit.

z.B. Wenn Sie mit "8" und dann "3" beginnen, dreht sich der Behälter nur um 45 Grad in die falsche Richtung.

Und das zweite Problem ist, dass die Zahlen herumdrehen, wenn das Rad rotiert. Hier

ist ein jsfiddle zum Code: https://jsfiddle.net/she4x2w6/10/

$('.item').click(function() { 
var currentId = $('#container').data('id'); 
var nextId = $(this).data('id'); 
var currentRotation = (360/items.length) * currentId - (360/items.length); 
var nextRotation = (360/items.length) * nextId - (360/items.length); 
var deg; 

if (currentRotation - nextRotation > 180 || nextRotation - currentRotation > 180) { 
    deg = nextRotation > 180 ? 360 - nextRotation : nextRotation - 360; 
} else { 
    deg = -Math.abs(nextRotation); 
} 
var itemDeg = nextRotation <= 180 ? nextRotation : -Math.abs(360 - nextRotation); 

$('#container').css({ 
    transition: 'transform 0.6s', 
    transform: 'rotate(' + deg + 'deg)' 
}) 

$('.item').css({ 
    transition: 'transform 0.6s', 
    transform: 'rotate(' + itemDeg + 'deg)' 
}) 

Answer 1

CSS drehen() Funktion dreht sich zu bestimmten Winkel ein Element, während Sie versuchen, Ihr Element um einen bestimmten Winkel zu drehen.

rotate() -CSS | MDN

Ich hatte einige Ihren Ansatz zu ändern, es zum Laufen zu bringen:

var radius = 100; // adjust to move out items in and out 
 
var items = $('.item'), 
 
    container = $('#container'), 
 
    width = container.width(), 
 
    height = container.height(); 
 
var angle = 0, 
 
    step = (2 * Math.PI)/items.length, 
 
    angle = Math.PI/2; 
 

 
items.each(function() { 
 
    var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2); 
 
    var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2); 
 
    $(this).css({ 
 
     left: x + 'px', 
 
     top: y + 'px' 
 
    }); 
 
    angle += step; 
 
}); 
 
$('#container').data('deg', 0); 
 
$('.item').click(function() { 
 
    var currentId = $('#container').data('id'); 
 
    var nextId = $(this).data('id'); 
 
    var currentDeg =$('#container').data('deg'); 
 
    var deg; 
 
    var degg = ((nextId+items.length-1)%items.length)*(360/items.length); 
 
    if (degg>=180) { 
 
     deg = 360-degg; 
 
    } else { 
 
     deg = -degg; 
 
    } 
 
    var t = (currentDeg - deg) % 360; 
 
    if (t<0) { 
 
     t = 360+t; 
 
    } 
 
    if (t<180) { 
 
     deg = currentDeg-t; 
 
    } else { 
 
     deg = currentDeg+360-t; 
 
    } 
 
    var itemDeg = -deg; 
 
\t \t var time = Math.abs(deg-currentDeg)/100; 
 
    $('#container').css({ 
 
     transition: 'transform ' + time + 's', 
 
     transform: 'rotate(' + deg + 'deg)' 
 
    }) 
 
    $('.item').css({ 
 
     transition: 'transform ' + time + 's', 
 
     transform: 'rotate(' + itemDeg + 'deg)' 
 
    }) 
 
    $('#container').data('id', nextId).data('deg', deg); 
 
});

body { 
 
    padding: 2em; 
 
} 
 
#container { 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 10px auto; 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    border-radius: 50%; 
 
} 
 
.item { 
 
    width: 30px; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    background: #f00; 
 
} 
 
.item p { 
 
    margin: 0; 
 
} 
 
.active .item-content { 
 
    opacity: 1 !important; 
 
    transition: opacity ease 0.6s; 
 
} 
 
.item .item-content { 
 
    opacity: 0; 
 
    transition: opacity ease 0.3s; 
 
    margin: auto; 
 
    position: absolute; 
 
    width: 230px; 
 
    transform: translate(-50%); 
 
    left: 50%; 
 
    pointer-events: none; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container" data-id="1"> 
 
    <div data-id="1" class="item">1</div> 
 
    <div data-id="2" class="item">2</div> 
 
    <div data-id="3" class="item">3</div> 
 
    <div data-id="4" class="item">4</div> 
 
    <div data-id="5" class="item">5</div> 
 
    <div data-id="6" class="item">6</div> 
 
    <div data-id="7" class="item">7</div> 
 
    <div data-id="8" class="item">8</div> 
 
    <div data-id="9" class="item">9</div> 
 
</div>