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

2019年8月5日 172次阅读

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

码：

$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' ]});

最佳答案 这就是我最终做的事情：

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属性.这个黑客仍将保持宽高比

点赞