我几天来一直在研究这个问题。我正在尝试为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会跳转。要看到这一点,请小提琴:
我有一个解决方案是在改变高度和宽度时应用当前的旋转变换。这解决了我以前的问题,但引入了另一个问题。要查看此示例,请转到小提琴,然后:
使用jsFiddle的注意事项:
rotate-t,grow-t,shrink-t的任何组合都将表现出理想的旋转行为(关于原点,没有跳跃)。但这也表明了不希望的增长和收缩(当svg处于角度时,左上方的位置会移动)。
任何组合pf rotate-t,grow,shrink都会表现出理想的缩放行为(svg的左上角不会移动)。但这也证明了不受欢迎的旋转特性(在不同的旋转和比例后会跳转)。
底线:我希望能够围绕原点旋转svg。然后生长图像,而左上角位置保持不变。然后在没有任何跳跃的情况下再次围绕原点旋转svg。
我知道转换函数如何影响svg的局部坐标系。我倾向于使用rotate-t,grow,shrink组合并简单地应用一些x-y偏移来消除“跳跃”效果。我想我必须有某种偏移,以避免在旋转或缩放过程中跳跃或移动,但我不清楚如何计算这种偏移。任何帮助将不胜感激。
请不要再犹豫了。就像我说的那样,我已经挖了好几天了。显然,我并不理解这一切,但我对正在发生的事情有点亲密,并乐于更详细地解释任何事情。
答案 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();
}
}
};