Question

我正试图在我的反应项目中拥有一个简单的图像查看器。有没有办法实现旋转（理想的缩放）而不引用JS中DOM节点的当前维度？

到目前为止，我尝试过这样的事情（减少案例/从我的jsfiddle中获取）：

function getTransform() {
    switch (rotation) {
    case 90: return { 
        transform: 'translateY(-100%) rotate(90deg)', 
      'transform-origin': 'bottom left'
     };
    case 180: return {
        transform: 'translate(100%, -100%) rotate(180deg)', 
      'transform-origin': 'bottom left'
    }
    case 270: return { 
        transform: 'translateX(-100%) rotate(270deg)', 
      'transform-origin': 'top right'
     };
     default: return {
        transform: 'none'
     }
  }
}

并将其作为样式应用于我的元素。不幸的是，这不起作用。虽然我可以使用Y的100％/相对值（即90度工作，至少180度适用于Y轴），但我无法使用它来转换X轴 - 图像的某些部分在屏幕外。

演示：https://jsfiddle.net/7huLa8e1/2/

有没有办法单独使用相对值，还是我必须抓住DOM节点并使用绝对像素值的宽度/高度才能使其工作？

Answer 1

如果我正确理解了您的问题，那么您的问题就是图片以不明的尺寸向右溢出容器。

我们需要解决这个问题。我的想法是将图像浮动到容器内。我们需要一个clearfix来保持正确的大小。

我已经重做了jquery以使用css类，因为它是修改子项（图像）的最简单方法

var rotation = 0;



function rotate(deg) {
	rotation = (360 + rotation + deg) % 360;
  $('#image-viewer').attr('class',  'rotate' + rotation);
}

$(function(){
$('#rotateLeft').click(
	function(event) {
  	rotate(-90);
  }
);

$('#rotateRight').click(
	function(event) {
  	rotate(90);
  }
);

});

#image-viewer {
  position: relative;
  cursor: pointer;
  border: solid red 2px;
}

.image-viewer-root {
  height: 100vh;
}

.image-viewer-viewport {
  height: 90%;
  overflow: auto;
}


.rotate90 {
  transform:  rotate(90deg) translate(0%, -100%);
  transform-origin: left top;
}

.rotate180 {
  transform: rotate(180deg);
  transform-origin: center center;
}

.rotate180 img {
  float: right;
}



.rotate270 {
  transform: translate(-100%, 0%) rotate(270deg);
  transform-origin: right top;
}

.rotate270 img {
  float: right;
}

.clearfix {
  clear: both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-viewer-root">
  <nav class="toolbar navbar navbar-dark bg-faded">
    <div class="nav navbar-nav">
      <button id="rotateLeft" class="btn nav-item">RotateLeft</button>
      <button id="rotateRight" class="btn nav-item">RotateRight</button>
    </div>
  </nav>
  <div class="image-viewer-viewport">
    <div id="image-viewer">
      <img src="https://sstatic.net/stackexchange/img/logos/so/so-logo.png?v=9c558ec15d8a">
      <div class="clearfix"></div>
    </div>
  </div>
</div>

CSS imageviewer：图像旋转（和缩放）

1 个答案: