How to rotate and scale image simultaneously?

user_6413199 0
Viewed 1458

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.

css html jquery javascript
3 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">

user_5194130

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.

user_37678250

Your transform is not correctly written to apply both scale and rotation. Also, it's better to add a function to handle several jobs like as bound checks to simplify the code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="image" style="font-size:18px; font-weight:bold; display:inline-block; margin:50px;">MyImage</div>

  <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>
  
  <script>
    var angle = 0;
    var scale = 1;

    $('.js-rotate-right').on('click', function() { setTransform(+15, 0) });
    $('.js-rotate-left').on('click', function() { setTransform(-15, 0) });
    $('.js-zoom-in').on('click', function() { setTransform(0, +.25)});
    $('.js-zoom-out').on('click', function() { setTransform(0, -.25) });

    function setTransform(delta_angle, delta_scale) {
      angle += delta_angle; scale += delta_scale;
      if (scale < 0.25) scale = 0.25; else if (scale > 2) scale = 2; 
      $('#image').css('transform', 'scale(' + scale + ')' + ' rotate(' + angle + 'deg)'); //note that scale and rotate are combined with a space
    }
  </script>

user_28035650
Related