Draggable Move, Rotate and Scale

draggable-move-rotate-and-scale.markdown

Draggable Move, Rotate and Scale

A Pen by kpendic on CodePen.

License.

index.html

<div class="shop">
  <img class="image" width="512" height="512" src="https://i.imgur.com/RKUiTEx.jpg" alt="">
  <div class="outline"></div>
  <div class="handle"></div>
</div>

script.js

console.clear();

var sh = document.querySelectorAll(".shop");

sh.forEach( function(el, i){
  var container = el;
  var outline = el.querySelector(".outline");
  var handle = el.querySelector(".handle");
  var image = el.querySelector(".image");
  var origSize = { width: image.width, height: image.height };
  var origVector = {  x: origSize.width/ 2, y: -origSize.height / 2 };
  // Length/magnitude of vector
  var len1 = Math.sqrt(origVector.x * origVector.x + origVector.y * origVector.y);
  // Normalized vector
  var v1 = { x: origVector.x / len1, y: origVector.y / len1 };
  // Angle of vector
  var angle1 = Math.atan2(v1.y, v1.x);

  var pars = [outline, handle, image, origSize, origVector, len1, v1, angle1];

  TweenLite.set([container, image, handle, outline], {
    xPercent: -50,
    yPercent: -50
  });

  TweenLite.set(outline, {
    width: origSize.width,
    height: origSize.height
  });

  TweenLite.set(handle, {
    x: origVector.x,
    y: origVector.y
  });

  Draggable.create(container);
  Draggable.create(handle, {
    onPress: stopPropagation,
    onDrag: transformItems(pars)
  });

  TweenLite.set(container, {
    autoAlpha: 1
  });
  
});






function transformItems( pars ) {
  console.log( pars )
  var outline = pars[ 0 ];
  var me = pars[ 1 ];
  var image = pars[ 2 ];
  var origSize = pars[ 3 ];
  var origVector = pars[ 4 ];
  var len1 = pars[ 5 ];
  var v1 = pars[ 6 ];
  var angle1 = pars[ 7 ];
  
  // Move vector
  var v2 = {
    x: me.x,
    y: me.y
  };

  // Length of move vector
  var len2 = Math.sqrt(v2.x * v2.x + v2.y * v2.y);

  // Normalize move vector
  if (len2) {
    v2.x /= len2;
    v2.y /= len2;
  }

  var angle = Math.atan2(v2.y, v2.x) - angle1;
  var scale = len2 / len1;

  console.log( pars[1] )
  
  TweenLite.set(outline, {
    width: origSize.width * scale,
    height: origSize.height * scale,
    rotation: angle + "_rad"
  });

  TweenLite.set(image, {
    scale: scale,
    rotation: angle + "_rad"
  });
}

function stopPropagation(event) {
  event.stopPropagation();
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>

style.scss

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  min-height: 100%;
}

body {
  overflow: hidden;
}

.container,
.outline,
.image,
.handle {
  position: absolute;
  top: 50%;
  left: 50%;
}

.container {
  visibility: hidden;
}

.outline {
  border: 1px dashed black;
}

.handle {
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
}