Question

我在项目中使用RaphaelJS和Raphael-Free-Transform进行图像处理。在这里，我试图挖掘图像horzoontally。为此，我正在改变自由变换比例值。图像被翻转，但图像从原始位置移开，并且还恢复到原始状态，因此我们也失去了翻转。

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();
}
};

注意：

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

这就是我最终做的事情：

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

您可以类似地为y轴执行此操作。翻转y轴时。

如原始问题所述，将keepRatio选项设置为true会导致问题。应用负标度后，旋转图像或尝试调整图像大小时，会发生奇怪的事情。要解决此问题，请应用以下hack（对于我的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修改scale属性。这个黑客仍然保持宽高比

Answer 2

我的解决方案： 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();
      \
    }
};

如何使用raphael自由变换翻转图像？

2 个答案: