javascript - Interactjs 旋转改变位置

Question

我正在尝试使用interactjs 旋转、调整大小和拖动图像。
我正在使用捏合缩放来调整大小。

旋转图像后，拖动功能无法正常工作并将图像定位在错误的坐标处。
我还尝试在旋转之前将图像移动(width/2,height/2)，以使其保持其位置，但这会停止调整大小和旋转功能。
这是我正在使用的代码。

捏合缩放和旋转仅适用于触摸手机:

Here是 fiddle (请在手机中检查捏合缩放和旋转)。

HTML

<div style="display:flex;flex-direction:row;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;width:100%">

  <img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png" style="width:150px; height:150px;" />
  <img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
  <img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
  <img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-11-30/17784-d2820ac7614e8f4eeb755c38bdccadc0.png" style="width:150px; height:150px;" />
  <img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5728-08fc043472bfa4cc9ba6d7c4a90324e0.png" style="width:150px; height:150px;" />
  <img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-04-27/5895-37981e6fff910eef9907adaf99faa6b6.png" style="width:150px; height:150px;" />
</div>
<div style="display:flex;flex-direction:row;justify-content:space-between;align-items:center;border:solid grey 2px;border-radius:20px;position:relative;float:left;background-color:silver;height:50px;width:150px">
  <button id="save" style="width:50px"  />
  <button id="savetwo" style="height:40px;border-radius:20px;width:70px">Save Image</button>
</div>
<br />
</div>
</div>

脚本

$(document).ready(function(){
  $(".Choice").click(function () {

    console.log($(this));
    var url = '"' + $(this)[0].src + '"';
    var index = url.indexOf("http://");
    console.log(url);
    var modurl = url.substring(index, url.length - 1);
    console.log(url);
    $(".ChoiceImage").attr("src", modurl);//url appends src to the current uri so I had to split it(suggest alternative )
  });

  var scale = 1,angle=0;
  var gestureArea = document.getElementById('gesture-area');
  var scaleElement = document.getElementById('chosenOne');
  var scaleElementParent = scaleElement.parentElement;

  interact(gestureArea).gesturable({
  onstart: function(event) {

  },
  onmove: function(event) {

  angle += event.da;

  scale = scale * (1 + event.ds);

    scaleElement.style.webkitTransform =
      scaleElement.style.transform =
      'scale(' + scale + ') rotate('+ angle + 'deg)';

    scaleElementParent.style.webkitTransform =
      scaleElementParent.style.transform =
      'scale(' + scale + ') rotate('+ angle + 'deg)';

    dragMoveListener(event);
  },
  onend: function(event) {

  }
  }).draggable({ onmove: dragMoveListener });

  function dragMoveListener(event) {

    var target = event.target.children[0];
    console.log(target);

    // keep the dragged position in the data-x/data-y attributes
    x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
    y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
      target.style.transform =
        'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

  // this is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener;

});

用户单击图像列表中的图像来执行操作。

提前致谢

Answer 1

您的主要问题是缩放和旋转图像和“手势区域”。

因此，如果手势检测元素发生旋转，interac.js 只会误解该 Action 。

我稍微清理了代码...并从这个答案中删除了所有未使用的元素，例如按钮...

这是完整的代码和 CodePen在移动设备上尝试一下。

console.clear();
$(".Choice").click(function() {
  $(".ChoiceImage").attr("src", $(this).attr("src"));
});

var scale = 1,
    angle=0,
    gestureArea = $('#gestureArea')[0],
    scaleElement = $('.ChoiceImage'),
    scaleElementParent = $('#gestureArea');


// Scale and rotate
interact(gestureArea).gesturable({
  onstart: function(event) {
    
  },
  onmove: function(event) {

    angle += event.da;
    scale = scale * (1+event.ds);

    scaleElement.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});
    //scaleElementParent.css({'transform':'scale(' + scale + ') rotate('+ angle + 'deg)'});

    dragMoveListener(event);
  },
  onend: function(event) {
    
  }
}).draggable({ onmove: dragMoveListener });


// Drag
function dragMoveListener(event) {

  var target = $(event.target);

  // keep the dragged position in the data-x/data-y attributes
  x = (parseFloat(target.attr('data-x')) || 0) + event.dx;
  y = (parseFloat(target.attr('data-y')) || 0) + event.dy;

  // translate the element
  target.css({'transform':'translate(' + x + 'px, ' + y + 'px)'});

  // update the posiion attributes
  target.attr('data-x', x);
  target.attr('data-y', y);
}

// this is used later in the resizing and gesture demos
window.dragMoveListener = dragMoveListener;

#gestureArea{
  position:relative;
  z-index:999;
  width:150px;
  height:150px;
  background-color:transparent;
  border:none;
  padding: 0px 0px 0px 0px; 
}
.container{
  display:flex;
  flex-direction:row;
  border:solid grey 2px;
  border-radius:20px;
  position:relative;
  float:left;
  background-color:silver;
  width:100%;
  position:fixed;
  bottom:0;
}
img{
  width:150px;
  height:150px;
}

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

<div id="gestureArea">
  <img id="chosenOne" class="ChoiceImage resize-drag">
</div>

<div class="container">
  <img class="Choice" src="http://gifmemorecreativity.com/images/design/small/2014-12-02/19220-50b6c96d8aa44ed1511a962bae279f25.png">
</div>