title: Simultaneous rotation, translation, and scaling of bitmap in android canvas
body: <p>I'm trying to show a picture, which can be zoomed and panned, and that rotates with a compass reading. With the code below, all three actions kind of work, but they influence each other.</p>
  
  <p>Here is what I want to achieve:<br>
  1. Rotate around the center of the screen<br>
  2. Scale leaving the same part of the picture in the center<br>
  3. Pan to the desired spot in the picture  </p>
  
  <p>Here is what is actually happening with the code below:<br>
  1. Rotation works as intended, around the center of the screen<br>
  2. Scaling works, but it scales around the <em>center of the picture</em><br>
  3. Translation only works as intended if <code>angle</code> is zero, otherwise it's moving in a wrong direction  </p>
  
  <pre><code>// the center of the view port
  float centerX = screen.right/2;
  float centerY = screen.bottom/2;
  
  Matrix m = new Matrix();
  m.preRotate(angle, centerX, centerY);
  m.preScale(mScaleFactor, mScaleFactor, centerX, centerY);
  
  // scaling the amount of translation, 
  // rotating the translation here gave crazy results
  float x = mPosX / mScaleFactor;
  float y = mPosY / mScaleFactor;
  m.preTranslate(x, y);
  
  canvas.drawBitmap(pic, m, null);
  </code></pre>
  
  <p>If I translate first, and later rotate, the translation works as intended but the rotation is not around the center of the view port anymore.</p>
  
  <p>How can I apply all three transformations, without them influencing each other?</p>