title: How to flip image using raphael free transform?
body: <p>I am using RaphaelJS and Raphael-Free-Transform for image manipulation in my project. Here I am trying to flip image horzontally. For this I am changing free transform scale value. Image is fliped, but the image gets displaced from its original position and it also gets restored to its original state so we also lose the flip.</p>
  
  <p>CODE:</p>
  
  <pre><code>$scope.flopImage = function () {
  if ($scope.currentImage !== null) {
  var ft = paper.freeTransform($scope.currentImage);
  ft.attrs.scale.x=-ft.attrs.scale.x;
  ft.apply();
  }
  };
  </code></pre>
  
  <p>CASE:2</p>
  
  <pre><code>$scope.flopImage = function () {
  if ($scope.currentImage !== null) {
  var ft = paper.freeTransform($scope.currentImage);
  $scope.currentImage.transform("S-1,1");
  ft.apply();
  }
  };
  </code></pre>
  
  <p>NOTE: <br></p>
  
  <pre><code>ft = paper.freeTransform($scope.currentImage,{draw:['bbox'],
               rotate: true,keepRatio:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides'],range: { rotate: [ -180, 180 ] },
               scale:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ]});
  </code></pre>