interact.js 中文文档（手势）手势事件当两个指针同时按下并且移动时被触发。在手势事件中，页面和客户端坐标被计算

<div id="rotate-area">
  <div id="angle-info">0&deg;</div>
  <svg id="arrow" viewbox="0 0 100 100">
    <polygon points="50,0 75,25 62.5,25 62.5,100 37.5,100 37.5,25 25,25" fill="#29e"></polygon>
  </svg>
</div>

.draggable {
  touch-action: none;
  user-select: none;
}

var angle = 0;

interact('#rotate-area').gesturable({
  onmove: function (event) {
    var arrow = document.getElementById('arrow');

    angle += event.da;

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

    document.getElementById('angle-info').textContent =
      angle.toFixed(2) + '\u00b0';
  }
});

手势事件当两个指针同时按下并且移动时被触发。在手势事件中，页面和客户端坐标被计算为接触坐标和速度的平均值。这个事件有如下属性。

手势事件属性	描述
`distance`	从第一次接触到当前的距离
`angle`	两个接触产生线的角度
`da`	上次到当前的角度变化
`scale`	开始事件和当前事件距离的比例
`ds`	上次到当前的尺寸变化
`box`	所有接触点的边界框

记得使用 CSS touch-action: none 来阻止浏览器平移（滚动）当用户通过触摸拖动的时候, 和 user-select: none 来禁用文本选择。