Snap.svg-拖动后旋转不起作用

Question

希望这是一个基本问题，可以轻松回答！ 基本上，我想拖动一个形状，然后双击它并旋转90度。 但是，一旦您从起点移动形状，旋转就会变成麻烦。 我试图像这样重新计算旋转的中心点...

var bbox = tri.getBBox();
tri.animate({
    transform: "R"+angle+"," + bbox.cx  + ","  + bbox.cy
}, 500)

参见小提琴... http://jsfiddle.net/henryJack/hsfor158/7/ 。

任何帮助，不胜感激！

Answer 1

我认为可能存在两个问题。

首先，转换将覆盖任何现有的转换，因此您要包括现有的转换，然后在其之上包括新的转换。

element.transform()

将现有的转换放置到位。 因此，您可以将新旧结合起来。

tri.animate({
   transform: tri.transform() + "R"+angle+"," + bbox.cx  + ","  + bbox.cy
}, 500)

但是，我认为的第二个问题是，默认情况下，getBBox（）不考虑转换，它会累积转换，因此您可能需要双击存储转换，然后使用它而不是transform（）。

Snaps getBBox（）有一个隐藏参数，如果您给它getBBox（1），我认为它将考虑到它的局部转换（对此我可能是错的，因此，如果您一定要知道，我会问一个这个特定主题有一个新问题，因为可能需要对源代码进行一些挖掘...源代码将参数称为isWithoutTransform，但我认为这取决于您如何解释这一点（发挥作用）。

因此，您可以将两者结合起来...

var bbox = tri.getBBox(1);
angle += 90;
tri.animate({
    transform: tri.transform() + "r"+angle+"," + bbox.cx  + ","  + bbox.cy
}, 500);

jsfiddle

可能会有更好的解决方案 ，但是可能会有更好的方法：如果您需要考虑应用于外部元素的进一步转换（例如，如果在一组已转换的元素中），它将变得更加复杂，您将需要添加像getTransformedBBox之类的函数或可能更好，提供了一个替代解决方案， 例如拖动外部组并旋转内部元素 。 无论如何，您都可以这样做作为替代解决方案（将元素添加到组中，添加拖动组，但只需旋转元素）！

通过使用额外的组，第二个更可靠的示例

var triGroup = s.group( tri )
var angle = 0;
var rotate = function() {
    var bbox = tri.getBBox();
    angle += 90;
    bbox = tri.getBBox();
    tri.animate({
        transform: "r"+angle+"," + bbox.cx  + ","  + bbox.cy
    }, 500);
}

triGroup.dblclick(rotate);
triGroup.drag();

jsfiddle 2