title: kineticjs rotate with mouse angle
body: <p>I am trying to make an image object rotate in accordance to the mouse being clicked down on that image and the angle of the mouse to the center of the object.</p>
  
  <p>Think of a unit circle and having the image being rotated about the circle based on where the mouse is on that circle.</p>
  
  <p>I currently have</p>
  
  <pre><code>var stage = new Kinetic.Stage({
  container: "container",
  width: 800,
  height: 500,
  id: "myCanvas",
  name: "myCanvas"
  });
  var layer = new Kinetic.Layer();
  //gets the canvas context
  var canvas = stage.getContainer();
  var mousePosX;
  var mousePosY;
  var mouseStartAngle;
  var selectedImage;
  var mouseAngle;
  var mouseStartAngle;
  console.log(canvas)
  
  var shiftPressed
  window.addEventListener('keydown', function (e) {
  if (e.keyCode == "16") {
      shiftPressed = true;
  }
  console.log(shiftPressed)
  }, true);
  
  window.addEventListener('keyup', function (e) {
  if (e.keyCode == "16") {
      shiftPressed = false;
  }
  console.log(shiftPressed)
  }, true);
  
  function drawImage(imageObj) {
  
  var dynamicImg = new Kinetic.Image({
      image: imageObj,
      x: stage.getWidth() / 2 - 200 / 2,
      y: stage.getHeight() / 2 - 137 / 2,
      width: 100, //imageObj.width,
      height: 100, // imageObj.height,
      draggable: true,
      offset: [50,50] //[(imageObj.width/2), (imageObj.height/2)]
  
  });
  
  dynamicImg.on('mousedown', function () {
  
  
      selectedImage = this;
      console.log("x: " + this.getX())
      console.log("y: " + this.getY())
  
      var mouseStartXFromCenter = mousePosX - (this.getX() + (this.getWidth() / 2));
      var mouseStartYFromCenter = mousePosY - (this.getY() + (this.getHeight() / 2));
      mouseStartAngle = Math.atan2(mouseStartYFromCenter, mouseStartXFromCenter);
  
      if (shiftPressed) {
          //console.log("trying to switch draggable to false");
          //console.log(this)
          this.setDraggable(false);
      }
  });
  
  dynamicImg.on('mouseup mouseout', function () {
      //console.log('mouseup mouseout')
      this.setDraggable(true);
  });
  
  
  dynamicImg.on('mouseover', function () {
      document.body.style.cursor = 'pointer';
  });
  dynamicImg.on('mouseout', function () {
      document.body.style.cursor = 'default';
  });
  
  imageArray.push(dynamicImg);
  layer.add(dynamicImg);
  stage.add(layer);
  }
  var imageObj = new Image();
  imageObj.onload = function () {
  drawImage(this);
  
  };
  imageObj.src = 'http://localhost:60145/Images/orderedList8.png';
  
  function getMousePos(evt) {
  
  var rect = canvas.getBoundingClientRect();
  return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
  };
  }
  
  
  canvas.addEventListener('mouseup', function () {
  selectedImage = undefined;
  });
  
  canvas.addEventListener('mousemove', function (evt) {
  mousePos = getMousePos(evt);
  //console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y)
  mousePosX = mousePos.x;
  mousePosY = mousePos.y;
  
  if (selectedImage != undefined) {
  
      mouseXFromCenter = mousePosX - selectedImage.getX();
      mouseYFromCenter = mousePosY - selectedImage.getY();
      mouseAngle = Math.atan2(mouseYFromCenter, mouseXFromCenter);
  
      var rotateAngle = mouseAngle - mouseStartAngle;
  
      selectedImage.setRotation(rotateAngle);
  
  }
  }, false);
  </code></pre>
  
  <p>the code has a couple things to it. 
  -It should only allow a rotate if 'shift' is pressed and mousedown event happens on an image. </p>
  
  <p>-it needs to maintain the dynamic image drawing as they will be populating the canvas dynamically over the life of the page.</p>
  
  <p>here is a good example of something similar i want to happen, but just simply cannot get it to work in canvas/kineticjs.
  <a href="http://jsfiddle.net/22Feh/5/" rel="nofollow">http://jsfiddle.net/22Feh/5/</a></p>