Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to rotate and scale image simultaneously?

I have an image element

<img id="image">

To manipulate the image I have the following buttons:-

<div class="btn-group">
    <button type="button" class="js-zoom-in">
         Zoom In
    </button>
    <button type="button" class="js-zoom-out">
         Zoom Out
    </button>
    <button type="button" class="js-rotate-right">
         Rotate Right
    </button>
    <button type="button" class="js-rotate-left">
         Rotate Left
    </button>
</div>

And to handle the corresponding events I am using the below jquery:-

<script>
    var angle = 0;
    var scale = 1;
    $('.js-rotate-right').on('click', function() {
        angle += 15;
        $('#image').css('transform','rotate(' + angle + 'deg)');
    });
    $('.js-rotate-left').on('click', function() {
        angle -= 15;
        $('#image').css('transform','rotate(' + angle + 'deg)');
    });
    $('.js-zoom-in').on('click', function() {
        scale += 0.25;
        if(scale == 2.25){
          scale = 2;
        }
        $('#image').css('transform','scale(' + scale + ')');
    });
    $('.js-zoom-out').on('click', function() {
        scale -= 0.25;
        if(scale == 0){
          scale = 0.25;
        }
        $('#image').css('transform','scale(' + scale + ')');
    });
</script>

If I rotate an image using these buttons and then try to zoom in or out the image gets restored to its original state. Same is the case when image is first scaled then rotated the image gets restored to original state.

I have even tried to do something like this:-

$('#image').css('transform','rotate(' + angle + 'deg)', 'scale(' + scale + ')');

for the following function:-

 $('.js-rotate-right').on('click', function() {
      angle += 15;
      console.log(scale);
      $('#image').css('transform','rotate(' + angle + 'deg)', 'scale(' + scale + ')');
  });

But still no effect.

like image 314
Shashishekhar Hasabnis Avatar asked Mar 06 '23 02:03

Shashishekhar Hasabnis


2 Answers

The issue is because you overwrite the previous value of transform every time you set the new one. To fix this you could instead build the transform setting after every change is made and have the value incorporate both the rotate and scale settings, something like this:

var angle = 0;
var scale = 1;
var $img = $('#image');

$img.on('transform', function() {
  $img.css('transform', `rotate(${angle}deg) scale(${scale})`);
});

$('.js-rotate-right').on('click', function() {
  angle += 15;
  $img.trigger('transform');
});

$('.js-rotate-left').on('click', function() {
  angle -= 15;
  $img.trigger('transform');
});

$('.js-zoom-in').on('click', function() {
  scale += 0.25;
  if (scale == 2.25) {
    scale = 2;
  };
  $img.trigger('transform');
});

$('.js-zoom-out').on('click', function() {
  scale -= 0.25;
  if (scale == 0) {
    scale = 0.25;
  }
  $img.trigger('transform');
});
img {
  display: block;
  width: 100px;
  height: 100px;
  background-color: #C00;
  position: absolute;
  top: 75px;
  left: 75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
  <button type="button" class="js-zoom-in">Zoom In</button>
  <button type="button" class="js-zoom-out">Zoom Out</button>
  <button type="button" class="js-rotate-right">Rotate Right</button>
  <button type="button" class="js-rotate-left">Rotate Left</button>
</div>
<img id="image">
like image 177
Rory McCrossan Avatar answered Mar 27 '23 03:03

Rory McCrossan


I suggest you create a function to do the CSS changes. Something like this:

function updateCSS() {
  $('#image').css('transform','rotate(' + angle + 'deg) scale(' + scale + ')');
}

...then call this function in all event handlers you declared.

The only problem with your code to set both rotate and scale is that you need to put both in argument 2 of the .css() jQuery method and separate them with a space character.

like image 37
jonasdev Avatar answered Mar 27 '23 02:03

jonasdev