Question

我在图片上执行旋转和缩放操作时遇到问题。

在stackOverflow上提出了一些类似的问题，我也引用了它们但没有成功。所以我提出这个问题。

我添加了一个代码段，其中有3个按钮和一个图像。

旋转和 + ＆amp; - 效果非常好，但是当您在旋转后缩放（ + 或 - ）时，它会将旋转重置为最初的状态。类似地，旋转操作将比例缩小为1。

我也试过旋转图像的容器div，但工作正常但是在拖动操作中产生了问题所以也不能使用这个想法..

那么有没有办法阻止SCALE不重置旋转？

感谢任何帮助。

＆＃13;

var curScale = 1;
var zoomFactor = 1.2;
var rotateAngle = 0;

// ZOOMING
function zoomIn(){
	curScale *= zoomFactor;
	$("#previewImg").css({"transform":'scale('+curScale+')'})
}
function zoomOut(){
	curScale /= zoomFactor;
	$("#previewImg").css({"transform":'scale('+curScale+')'})
}




// ROTATION
function doRotate(){
	rotateAngle += 90;
	$("#previewImg").css("transform","rotate("+rotateAngle+"deg)");
}

＆＃13;

#previewImg{
  width:300px;
  height:auto;
  position:absolute;
  top:15%;
  left:15%;
}

button{
  position:fixed;
  top:10;
  margin-left:20px;
  z-index:1000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick='zoomIn()' style="left:5px">+</button>
<button onClick='zoomOut()' style="left:30px">-</button>
<button onClick='doRotate()' style="left:60px">Rotate</button>
<div>
  
  <img src="http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg" id='previewImg'>


</div>

＆＃13;

Answer 1

是的，但需要对代码稍作修改。

您需要设置所需的更改，然后应用转换，同时考虑以下两个属性：

var curScale = 1;
var zoomFactor = 1.2;
var rotateAngle = 0;

// ZOOMING
function zoomIn() {
  curScale *= zoomFactor;
  applyTransformation();
}

function zoomOut() {
  curScale /= zoomFactor;
  applyTransformation();
}

// ROTATION
function doRotate() {
  rotateAngle += 90;
  applyTransformation();
}

function applyTransformation() {
  $('#previewImg').css({
    'transform': 'scale(' + curScale + ') rotate(' + rotateAngle + 'deg)'
  })
}

#previewImg {
  width: 300px;
  height: auto;
  position: absolute;
  top: 15%;
  left: 15%;
}

button {
  position: fixed;
  top: 10;
  margin-left: 20px;
  z-index: 1000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick='zoomIn()' style="left:5px">+</button>
<button onClick='zoomOut()' style="left:30px">-</button>
<button onClick='doRotate()' style="left:60px">Rotate</button>
<div>

  <img src="http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg" id='previewImg'>


</div>

Answer 2

＆＃13;

var curScale = 1;
var zoomFactor = 1.2;
var rotateAngle = 0;

// ZOOMING
function zoomIn() {
  curScale *= zoomFactor;
  $('#previewImg').css({
    'transform': 'scale(' + curScale + ') rotate(' + rotateAngle + 'deg)'
  });
}

function zoomOut() {
  curScale /= zoomFactor;
  $('#previewImg').css({
    'transform': 'scale(' + curScale + ') rotate(' + rotateAngle + 'deg)'
  });
}

// ROTATION
function doRotate() {
  rotateAngle += 90;
  $('#previewImg').css({
    'transform': 'scale(' + curScale + ') rotate(' + rotateAngle + 'deg)'
  });
}

＆＃13;

#previewImg {
  width: 300px;
  height: auto;
  position: absolute;
  top: 15%;
  left: 15%;
}

button {
  position: fixed;
  top: 10;
  margin-left: 20px;
  z-index: 1000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick='zoomIn()' style="left:5px">+</button>
<button onClick='zoomOut()' style="left:30px">-</button>
<button onClick='doRotate()' style="left:60px">Rotate</button>
<div>

  <img src="http://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed2.jpg" id='previewImg'>


</div>

＆＃13;

很抱歉，我迟到了。

在Scaling CSS3上旋转重置为0deg

2 个答案: