使用数组在 JavaScript 中旋转图像

Question

I am writing an image rotation functionality. I have created an array to store degrees for transform function.

However I need to know instead of increment array, to move next and previous between the rotations array.

Switching from left and right doesn't work as expected.

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

you could do rotation something like that without using array

 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

You had a misconception with the minus in the rotation

-90deg, -180deg, -270deg, -360deg is not the same as 90deg, 180deg, 270deg, 360deg backwards (that would be 0deg, -90deg, -180deg, -270deg , so with an offset of one)

What I do is, I start at zero and move inside the array backwards and forwards

 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">