如何使用拉斐尔自由变换翻转图像

How to flip image using raphael free transform?

本文关键字：变换 翻转 图像 自由 何使用      更新时间：2023-09-26

我在项目中使用RaphaelJS和Raphael Free Transform进行图像处理。在这里，我试图横向翻转图像。为此，我正在更改自由变换比例值。图像被翻转，但图像会从其原始位置偏移，同时也会恢复到其原始状态，因此我们也会失去翻转。

代码：

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

病例：2

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

注：

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

这就是我最终要做的：

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

你可以对y轴做类似的操作。翻转y轴时。

正如在最初的问题中所评论的，将keepRatio选项设置为true会导致问题。应用负比例后，当旋转图像或尝试调整图像大小时，会发生奇怪的事情。为了解决这个问题，您应用了以下破解（对于我的raphael.free_transform版本，它是第1166行）：

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修改比例属性。此破解将仍然保持纵横比

我的解决方案：90度移动：

 $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度：

$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();
      '
    }
};
相关文章：