Snap.svg

Question

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

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

参见fiddle...http://jsfiddle.net/henryJack/hsfor158/7/。

非常感谢任何帮助！

Answer 1

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

首先，转换会覆盖所有现有的转换，因此您希望包含现有的转换，然后在其上包含新的转换。

element.transform()

将提供现有的转换。所以你可以把旧的和新的结合起来。

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

但是，我认为第二个问题是 getBBox() 默认情况下不考虑转换，它会累积转换，因此您可能希望通过双击将转换存储在某处并使用它变换（）。

Snaps getBBox() 有一个隐藏的参数，如果你给它 getBBox(1)，我想它会考虑到它的局部变换（我在这方面可能是错的，所以如果你需要明确地知道，我会问一个关于这个特定主题的新问题，因为它可能需要深入挖掘源代码......源代码调用参数 isWithoutTransform，但我认为这取决于你如何解释它，玩一玩）。 =16=]

所以你可以把两者结合起来...

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

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

Snap.svg - Rotate after drag not working

javascript

svg