title: KineticJS mouse position wrong after layer rotated
body: <p>My demo is here <a href="http://jsfiddle.net/akuma/7NmXw/1/" rel="nofollow">http://jsfiddle.net/akuma/7NmXw/1/</a></p>
  
  <ol>
  <li>First, draw something in the blue box.</li>
  <li>Then, click the rotate button once.</li>
  <li>After the box has been rotated, draw something again.</li>
  <li>Finally the draw poisitoin was wrong.</li>
  </ol>
  
  <p>How can I fix that, thanks!</p>
  
  <h1>Code:</h1>
  
  <pre><code>var stage = new Kinetic.Stage({
      container: 'container',
      width: 500,
      height: 500
  });
  
  var layer = new Kinetic.Layer({
      width: 400,
      height: 400
  });
  
  var rect = new Kinetic.Rect({
      x: 0,
      y: 0,
      width: 400,
      height: 300,
      fill: '#00D2FF',
      stroke: 'black',
      strokeWidth: 5
  });
  
  layer.add(rect);
  stage.add(layer);
  
  $(document).on('click', '#rotateBtn', function () {
      var w = layer.getWidth(),
          h = layer.getHeight();
      layer.setOffset(w / 2, h / 2);
      layer.setPosition(w / 2, h / 2);
      layer.rotateDeg(90);
      layer.draw();
  });
  
  var points = [],
      drawing = false;
  
  stage.on('mousedown', function () {
      drawing = true;
  
      var pos = stage.getMousePosition();
      points.push([pos.x, pos.y]);
  
      var line = new Kinetic.Line({
          id: 'line',
          points: [
              [pos.x, pos.y],
              [pos.x + 1, pos.y + 1]
          ],
          stroke: 'white',
          strokeWidth: 5,
          lineCap: 'round',
          lineJoin: 'round'
      });
  
      layer.add(line);
      layer.drawScene();
  });
  
  stage.on('mousemove', function () {
      if (!drawing) {
          return;
      }
  
      // Remove previous line
      layer.get('#line').remove();
  
      var pos = stage.getMousePosition();
      points.push([pos.x, pos.y]);
  
      // Redraw line
      var line = new Kinetic.Line({
          id: 'line',
          points: points,
          stroke: 'white',
          strokeWidth: 5,
          lineCap: 'round',
          lineJoin: 'round'
      });
      layer.add(line);
      layer.drawScene();
  });
  
  stage.on('mouseup', function () {
      drawing = false;
      points = [];
  });
  </code></pre>