Поворот изображения в JavaScript с использованием массива

Question

Я пишу функцию поворота изображения. Я создал массив для хранения градусов для функции преобразования.

Однако мне нужно знать вместо приращения массива, чтобы перемещаться вперед и назад между массивом rotations.

Переключение слева и право не работает, как ожидалось.

https://jsfiddle.net/andreas20/v94zLg8b/

rotations = ['90deg', '180deg', '270deg', '360deg']
let img = document.getElementById('img_blob');
let array_increment = 0

$('#left').click(() => {
  if (array_increment > 3)
    array_increment = 0

  img.style.transform = 'rotate(-' + rotations[array_increment] + ')'
  array_increment++
  console.log(array_increment)
})

$('#right').click(() => {
  if (array_increment > 3)
    array_increment = 0

  img.style.transform = 'rotate(' + rotations[array_increment] + ')'
  array_increment++
  console.log(array_increment)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="left">Left</button>
<button id="right">Right</button><br>

<img id="img_blob" src="https://i.imgur.com/vgD5ycf.jpg">

Answer 1

вы можете сделать что-то подобное без использования массива

let img = document.getElementById('img_blob');
let rotationValue = 0;

$('#left').click(() => rotate(-1));
$('#right').click(() => rotate(1));

function rotate(direction) {
  rotationValue += 90 * direction;
  rotationValue = rotationValue % 360;
  img.style.transform = `rotate(${rotationValue}deg)`;
  // console.log(rotationValue);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="img_blob" src="https://dummyimage.com/150x150/000/fff" />
<button id="left">Left</button>
<button id="right">Right</button>

Answer 2

У вас было неправильное представление о минусе в повороте

-90deg, -180deg, -270deg, -360deg - это не то же самое, что 90deg, 180deg, 270deg, 360deg в обратном направлении (это будет 0deg, -90deg, -180deg, -270deg, то есть со смещением один)

То, что я делаю, я начинаю с нуля и перемещаюсь внутрь массива назад и вперед

rotations = ['0deg', '45deg', '90deg', '135deg', '180deg', '225deg', '270deg', '315deg']
let img = document.getElementById('img_blob');
let array_increment = 0

array_increment = 0;
$('#left').click(() => {
  array_increment--
  array_increment = (array_increment + rotations.length) % rotations.length
  console.log(array_increment)

  img.style.transform = 'rotate(' + rotations[array_increment] + ')'
})

$('#right').click(() => {
  array_increment++
  array_increment = (array_increment + rotations.length) % rotations.length
  console.log(array_increment)

  img.style.transform = 'rotate(' + rotations[array_increment] + ')'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="left">Left</button>
<button id="right">Right</button><br>

<img id="img_blob" src="https://i.picsum.photos/id/190/300/300.jpg">