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

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