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 + ')');
  });

但仍然没有效果。

标签： javascriptjqueryhtmlcss

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