Javascript 旋转会改变位置_Javascript_Jquery_Html_Interact.js

Javascript 旋转会改变位置

javascript jquery html

Javascript 旋转会改变位置,javascript,jquery,html,interact.js,Javascript,Jquery,Html,Interact.js,我正在尝试使用InteractiveJS旋转、调整大小和拖动图像。我正在使用收缩缩放来调整大小 <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://gifmem

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

<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>

旋转图像后，拖动功能无法正常工作，并将图像定位在错误的坐标处。
在旋转之前，我还尝试将img移动（宽度/2，高度/2），使其保持其位置，但这停止了调整大小和旋转功能。
这是我正在使用的代码

<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>

仅在触摸式手机上使用按压缩放和旋转功能：

<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>

是小提琴（请在手机中查看是否存在可缩放和旋转的按键）

<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>

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>

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

<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>

提前感谢

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

<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>

因此，如果旋转手势检测元素，

interac.js

只能误解动作

<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>

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

<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>

下面是完整的代码和在移动设备上试用的示例

<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>

console.clear（）；
$（“.Choice”）。单击（函数（）{
$（“.ChoiceImage”）.attr（“src”），$（this.attr（“src”））；
});
风险等级=1，
角度=0，
gestureArea=$（'#gestureArea'）[0]，
scaleElement=$（'.ChoiceImage'），
scaleElementParent=$（“#gestureArea”）；
//缩放和旋转
互动（手势区域）。可手势({
onstart:函数（事件）{
},
onmove：函数（事件）{
角度+=event.da；
比例=比例*（1+事件.ds）；
css（{'transform'：'scale（'+scale+'）rotate（'+angle+'deg）}）；
//css（{'transform'：'scale（'+scale+'）rotate（'+angle+'deg）}）；
dragMoveListener（事件）；
},
ONED：功能（事件）{
}
}).draggable（{onmove:dragMoveListener}）；
//拖
函数dragMoveListener（事件）{
var target=$（event.target）；
//在data-x/data-y属性中保持拖动位置
x=（parseFloat（target.attr（'data-x'））| | 0）+event.dx；
y=（parseFloat（target.attr（'data-y'））| | 0）+event.dy；
//翻译元素
css（{'transform'：'translate（'+x+'px'，+y+'px）}）；
//更新posiion属性
target.attr（'data-x'，x）；
target.attr（'data-y'，y）；
}
//这将在稍后的调整大小和手势演示中使用
window.dragmovestender=dragmovestender；

#手势区{
位置：相对位置；
z指数：999；
宽度：150px；
高度：150像素；
背景色：透明；
边界：无；
填充：0px 0px 0px 0px；
}
.集装箱{
显示器：flex；
弯曲方向：行；
边框：纯灰2px；
边界半径：20px；
位置：相对位置；
浮动：左；
背景颜色：银色；
宽度：100%；
位置：固定；
底部：0；
}
img{
宽度：150px；
高度：150像素；
}