Interactjs旋转移位

Question

我想旋转，调整大小和使用interactjs拖动图像。
我正在使用缩放缩放来调整大小。

旋转图像后，拖动功能不起作用，并将图像置于错误的坐标位置。
我也试图在旋转之前移动img （宽度/ 2，高度/ 2），以便它保持其位置，但是这会停止调整大小和旋转特征。
这是我正在使用的代码。

捏缩放和旋转，只适用触摸屏手机上：

Here是小提琴（请在电话检查捏到缩放和旋转）。

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> 

SCRIPT

$(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只能曲解运动。

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

这里是完整的代码d a 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>