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

Question

我在我的项目中使用 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' ]});

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属性。此 hack 将仍然保持纵横比

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

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

How to flip image using raphael free transform?

javascript

angularjs

raphael