How to flip an image using the free raphael conversion?

Question

I use RaphaelJS and Raphael-Free-Transform for image processing in my project. Here I am trying to flip the image horizontally. To do this, I change the value of the free conversion scale. The image is upside down, but the image is shifted from its original position, and it is also restored to its original state, so we also lose the flip.

CODE:

$scope.flopImage = function () {
if ($scope.currentImage !== null) {
var ft = paper.freeTransform($scope.currentImage);
ft.attrs.scale.x=-ft.attrs.scale.x;
ft.apply();
}
};

CASE: 2

$scope.flopImage = function () {
if ($scope.currentImage !== null) {
var ft = paper.freeTransform($scope.currentImage);
$scope.currentImage.transform("S-1,1");
ft.apply();
}
};

NOTE:

ft = paper.freeTransform($scope.currentImage,{draw:['bbox'],
             rotate: true,keepRatio:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides'],range: { rotate: [ -180, 180 ] },
             scale:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ]});

Answer 1

My solution: 90 degrees Moving:

 $scope.flopImage = function () {

    if ($scope.currentImage !== null) {

        var ft = paper.freeTransform($scope.currentImage);

        ft.attrs.rotate = ft.attrs.rotate + 90;
        if(ft.attrs.rotate === 360) {
            ft.attrs.rotate = 0;
        }
        ft.apply();

    }
};

180 degrees:

$scope.flipImage = function () {
    if($scope.currentImage !==null){
        var ft = paper.freeTransform($scope.currentImage);
        ft.attrs.rotate = ft.attrs.rotate + 180;
        if(ft.attrs.rotate === 360){
            ft.attrs.rotate=0;
        }
        ft.apply();
      \
    }
};

Answer 2

Here is what I did:

ft = paper.freeTransform(img, ftConfig.opts, ftConfig.callback),
ft.attrs.scale.x *= -1;
ft.apply();

Similarly, you can do this for the y axis. When flipping along the y axis.

, keepRatio true . , , . , ( 1166 raphael.free_transform):

function keepRatio(axis) {
    return;
    if ( axis === 'x' ) {
        ft.attrs.scale.y = ft.attrs.scale.x / ft.attrs.ratio;
    } else {
        ft.attrs.scale.x = ft.attrs.scale.y * ft.attrs.ratio;
    }
}

, return, keepRatio .