如何同时旋转和缩放图像？

Question

我有一个图像元素

<img id="image">

为了操纵图像,我有以下按钮: -

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

并处理相应的事件我使用下面的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>

如果我使用这些按钮旋转图像然后尝试放大或缩小图像将恢复到其原始状态.首先缩放图像然后旋转图像恢复到原始状态的情况也是如此.

我甚至试图做这样的事情: -

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

对于以下功能: -

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

但仍然没有效果.

Answer 1

问题是因为您transform每次设置新值时都会覆盖以前的值.要解决此问题,您可以transform在每次更改后构建设置,并将值包含在rotate和scale设置中,如下所示:

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