Question

我几天来一直在研究这个问题。我正在尝试为svgs实现一个“自由变换”工具。类似于Raphael.FreeTransform或者如何在MS Word中移动/旋转/缩放图像。（是的，我知道有图书馆）以下jSFiddle显示我的问题：https://jsfiddle.net/hLjvrep7/12/

jsFiddle中有5个函数：rotate-t。收缩，生长，收缩，成长。以'-t'为后缀的函数也应用当前的旋转变换。 e.g：

生长叔

rect.attr({height : height * 1.25, width : width * 1.25}).transform('r' + degree);

生长

rect.attr({height : height * 1.25, width : width * 1.25});

旋转一个svg，然后缩放。如果你试图再次旋转svg（缩放后），svg会跳转。要看到这一点，请小提琴：

按两次旋转-t。 Svg应该从矩形原点旋转总共30度。
两次成长（不成长）。请注意，svg 的左上角位置保持不变 。
点击一次旋转。注意svg跳转到不同的位置，然后旋转。
注意随后旋转-t-t将继续围绕原点旋转图像（这是我想要的第一次旋转-t点击）

我有一个解决方案是在改变高度和宽度时应用当前的旋转变换。这解决了我以前的问题，但引入了另一个问题。要查看此示例，请转到小提琴，然后：

按两次旋转-t。
几次成长。请注意svg增长，但矩形的 左上角移动 。这对我来说是个问题。我希望svg在没有左上角的情况下成长。

使用jsFiddle的注意事项：

rotate-t，grow-t，shrink-t的任何组合都将表现出理想的旋转行为（关于原点，没有跳跃）。但这也表明了不希望的增长和收缩（当svg处于角度时，左上方的位置会移动）。

任何组合pf rotate-t，grow，shrink都会表现出理想的缩放行为（svg的左上角不会移动）。但这也证明了不受欢迎的旋转特性（在不同的旋转和比例后会跳转）。

底线：我希望能够围绕原点旋转svg。然后生长图像，而左上角位置保持不变。然后在没有任何跳跃的情况下再次围绕原点旋转svg。

我知道转换函数如何影响svg的局部坐标系。我倾向于使用rotate-t，grow，shrink组合并简单地应用一些x-y偏移来消除“跳跃”效果。我想我必须有某种偏移，以避免在旋转或缩放过程中跳跃或移动，但我不清楚如何计算这种偏移。任何帮助将不胜感激。

请不要再犹豫了。就像我说的那样，我已经挖了好几天了。显然，我并不理解这一切，但我对正在发生的事情有点亲密，并乐于更详细地解释任何事情。

Answer 1

My solutions for scale, rotate, move back and front etc:


   $scope.back = function () {
        if($scope.currentImage !==null) {
            if($scope.currentImage.prev!=undefined) {
                var bot =  $scope.currentImage.prev;
                $scope.currentImage.insertBefore(bot);
                ft.apply();

            }
        }
    };

    //Function for moving front
    $scope.front = function () {
        if($scope.currentImage !==null) {
            if($scope.currentImage.next!=undefined) {
                var top =  $scope.currentImage.next;
                if($scope.currentImage.next.node.localName == "image")
                    $scope.currentImage.insertAfter(top);
                ft.apply();

            }
        }
    };

//ZOOM
   $scope.zoomIn = function () {
        if ($scope.currentImage!= null) {
            var ft = paper.freeTransform($scope.currentImage);
            if(ft.attrs.scale.y<4) {
                $scope.currentImage.toFront();
                ft.attrs.scale.y = ft.attrs.scale.y  *(1.1);
                ft.attrs.scale.x = ft.attrs.scale.x  *(1.1);
                ft.apply();
                ft.updateHandles();

            }

        }
    };

调整svg（Raphael.js）的大小和旋转会创建跳跃

1 个答案: