javascript - Interactive.js 拖动对象后旋转和缩放

Question

我正在使用interact.js 来拖放、缩放和旋转元素。 问题是当我缩放或旋转元素时，它将从初始位置而不是从最后位置(拖动的位置)缩放/旋转。 这是我的代码

var angle = 0;
var scale = 1;


// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    // enable autoScroll
    autoScroll: true,

    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) {
      //var textEl = event.target.querySelector('p');

      //textEl && (textEl.textContent =
       // 'moved a distance of '
       // + (Math.sqrt(event.dx * event.dx +
        //             event.dy * event.dy)|0) + 'px');
    }
  }).gesturable({
  onmove: function (event) {
    //var arrow = document.getElementById('arrow');
    scale = scale * (1 + event.ds);
    angle += event.da;
    event.target.style.webkitTransform =
    event.target.style.transform =
      'rotate(' + angle + 'deg)'+'scale(' + scale + ')';   
  }
});


  function dragMoveListener (event) {
    var target = event.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

它不起作用，因为通过将transform设置为translate，您将覆盖旋转+缩放，反之亦然。您可以为其中一个(或两个)设置一个全局变量，然后在设置样式时将它们连接起来。