Изменение размера и поворот на svg (Raphael.js) создает прыжки

Question

Я работаю над этой проблемой в течение нескольких дней. Я пытаюсь реализовать инструмент «свободного преобразования» для svgs. Как и у Raphael.FreeTransform или как вы будете перемещать/поворачивать/масштабировать изображения в MS Word. (Да, я знаю, что есть библиотеки) Следующая jSFiddle отображает мою проблему: https://jsfiddle.net/hLjvrep7/12/

В jsFiddle: rotate-t есть 5 функций. сжимаются, растут, сжимаются, растут. Функции, имеющие значение '-t', также применяют текущее преобразование вращения. например .:

растут-т

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. Хит вращается-t один раз. Обратите внимание, что svg переходит в другое положение, затем вращается.
4. Примечания удара поворота-T последующих моментов времени будет продолжать вращать изображение вокруг начала координат (это то, что я хочу в первый раз, поворот-т щелчок)

Одно решения у меня было применить вращение тока при изменении высоты и ширины. Это исправляет мою предыдущую проблему, но представляет еще одну проблему. Чтобы посмотреть пример этого, перейдите к скрипке и:

1. Поверните повернуть-t дважды.
2. Хит расти-т пару раз. Обратите внимание, что svg растет, но верхнее левое положение прямоугольника перемещается. Это проблема для меня. Я хочу, чтобы svg расти без левого верхнего угла, чтобы двигаться.

Замечания по использованию jsFiddle:

Любая комбинация циклического сдвига-т, расти-т, термоусадочная т будет демонстрировать идеальное поведение вращения (о происхождении, не прыгает). Но это также демонстрирует нежелательный рост и сокращение (верхняя левая позиция перемещается, когда svg находится под углом).

Любая комбинация pf rotate-t, grow, shrink будет демонстрировать идеальное поведение масштабирования (верхний левый угол svg не перемещается). Но это также демонстрирует нежелательное свойство поворота (скачкообразно скатится после различных поворотов и шкал).

Итог: Я хочу, чтобы svg вращался вокруг начала координат. Затем увеличьте изображение, а верхнее левое положение останется тем же. Затем снова вращайте svg вокруг начала координат без каких-либо прыжков.

Я знаю, как функция преобразования воздействует на локальную систему координат svg.Я склоняюсь к использованию rotate-t, вырастаю, сокращаю комбо и просто применяю некоторые смещения 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(); 

      } 

     } 
    };