需要帮助缩放和旋转视口中的图像答案

【问题标题】：Need help scaling and rotating an image in a viewport需要帮助缩放和旋转视口中的图像
【发布时间】：2020-06-03 11:25:33
【问题描述】：

我在这个 JSFidle 中有代码 - https://jsfiddle.net/pmi2018/smewua0k/211/

Javascript

$('#rotate').click(function(e) {
  updateImage(90, 0)
  console.log("rotation");
});

$('#zoom-in').click(function() {
  updateImage(0, 0.1);
  console.log("Zoomed in");
});

$('#zoom-out').click(function() {
  updateImage(0, -0.1);
  console.log("Zoomed out");
});

var zoomLevel = 1;
var rotation = 0;

var updateImage = function(angle, zoom) {
  zoomLevel += zoom;
  var img_scale = ' scale(' + zoomLevel + ') ';

  rotation += angle;
  if (rotation == 360) {
    rotation = 0;
  }
  var str_rotation = ' rotate(' + rotation + 'deg) ';
  console.log("rotation=" + str_rotation + " scale=" + img_scale);
  var img = document.getElementById('sam');
  img.style.transform = img_scale + str_rotation
  //if (angle == 0) {
  //   img.style.transformOrigin = '0 0';
  //   img.style.transform = img_scale;   
  // }
  // else {
  //   img.style.transformOrigin = 'center center';
  //   img.style.transform = str_rotation; 
  // }
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button type="button" id="zoom-in">zoom in</button> <button type="button" id="zoom-out">zoom out</button> 

<div id=imageblock>
  <img  id="sam" src="http://placekitten.com/g/250/250" />
</div>
<div>
  <a id="rotate" href="#">Rotate 90 degrees</a>
</div>

CSS

#imageblock {
  width: 300px;
  height: 300px;
  border: 1px solid #000000;
  overflow: auto;
  display: block;
}

#sam {
  transform-origin: center, center;
}

问题是我需要在缩放图像时将原点放在左上角以将缩放后的图像保留在框中；但是当我旋转图像以将图像保留在框中时，原点必须是中心，中心。然而，我读过的 CSS 文章说，在旋转和缩放图像时，它们必须一起完成。

我尝试分别应用旋转和缩放，以便正确设置原点（注释掉的代码），但只有第一个变换触发，而不是第二个。

如何旋转和缩放#imagebox 中的图像？

谢谢！

标记

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

之所以“走到一起”，是因为 transform 属性只能有一个来源。因此，如果您对单个对象应用多个转换，它们都将使用相同的原点。

一个简单的解决方案是将图像放在一个 div 中。然后，例如使用 div 上的缩放和图像上的旋转，以便两者可以有不同的原点。

$('#rotate').click(function(e) {
  updateImage(90, 0)
});

$('#zoom-in').click(function() {
  updateImage(0, 0.1);
});

$('#zoom-out').click(function() {
  updateImage(0, -0.1);
});

var zoomLevel = 1;
var rotation = 0;

var updateImage = function(angle, zoom) {
  zoomLevel += zoom;
  var img_scale = ' scale(' + zoomLevel + ') ';

  rotation += angle;
  if (rotation == 360) {
    rotation = 0;
  }
  var str_rotation = ' rotate(' + rotation + 'deg) ';

  // Here I modified the syntax just a bit, to use JQuery methods instead of pur Javascript. I hope you are ok with it
  // I modify the image rotate property, and then the div scale property
  $('#sam').css('transform',str_rotation)
  $('#zoom').css('transform', img_scale);
}

#imageblock {
  width: 300px;
  height: 300px;
  border: 1px solid #000000;
  overflow: auto;
  display: block;
  overflow: hidden; /* To hide the scrollbar when you zoom in */
}

#zoom {
  transform:scale(1);
  transform-origin:top left;
}

#sam {
  transform: rotate(0deg)
  transform-origin: center center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button type="button" id="zoom-in">zoom in</button> <button type="button" id="zoom-out">zoom out</button> 

<div id=imageblock>
  <div id="zoom"> <!-- I added this div -->
    <img  id="sam" src="http://placekitten.com/g/250/250" />
  </div>
</div>
<div>
  <a id="rotate" href="#">Rotate 90 degrees</a>
</div>

另外，请注意transform-origin: center center; 中没有逗号。

如果您有任何问题，请询问他们。我希望它有所帮助！

【讨论】：