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

时间:2016-03-16 14:11:16

标签: javascript svg raphael

我几天来一直在研究这个问题。我正在尝试为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会跳转。要看到这一点,请小提琴:

  1. 按两次旋转-t。 Svg应该从矩形原点旋转总共30度。
  2. 两次成长(不成长)。请注意,svg 的左上角位置保持不变
  3. 点击一次旋转。注意svg跳转到不同的位置,然后旋转。
  4. 注意随后旋转-t-t将继续围绕原点旋转图像(这是我想要的第一次旋转-t点击)
  5. 我有一个解决方案是在改变高度和宽度时应用当前的旋转变换。这解决了我以前的问题,但引入了另一个问题。要查看此示例,请转到小提琴,然后:

    1. 按两次旋转-t。
    2. 几次成长。请注意svg增长,但矩形的 左上角移动 。这对我来说是个问题。我希望svg在没有左上角的情况下成长。
    3. 使用jsFiddle的注意事项:

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

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

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

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

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

1 个答案:

答案 0 :(得分: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();

            }

        }
    };