0

我正在尝试缩放然后旋转一个三角形，然后将其转换为 Snap SVG 中的给定点。
我想围绕它的顶部而不是中心旋转三角形，所以我可以构建像馅饼一样的东西。
所以我想我先缩放，然后旋转，然后再平移。 

var t = new Snap.Matrix();
t.scale(0.5); 
t.rotate(45, bbox.cx, (bbox.cy-(bbox.h/2)));

但不知何故，规模和旋转总是有点偏离。
我重用了一个我找到并更新的 jsfiddle，所以你可以看到我的尝试：http:
//jsfiddle.net/AGq9X/477/
不知何故 bbox.cx 和 bbox.cy 不在三角形的中心。
在我的本地设置中，它们是。
奇怪的是，没有缩放的旋转工作正常，但是缩放然后旋转似乎总是在 y 轴上有点偏离，三角形不会停留在旋转点。
有什么想法可以解决吗？

编辑：
好的，我找到了解决方案，感谢 lan，你是对的，缩放中心很重要，
我认为它正在使用对象的中心，但它是左上角。我对其进行了调整
，现在效果更好：

var bbox = obj.getBBox(); //get coords etc. of triangle object
var t = new Snap.Matrix();
var offset = (bbox.cy+(bbox.h)) - centerY; //translate Y to center,  
//depends on scaleing factor (0.5 = bbox.h, 0.25 = bbox.h*2)
t.scale(0.5, 0.5, bbox.cx, (bbox.cy+(bbox.h/2))); //scale object
t.translate(0,-offset); //translate to center
t.rotate(45, bbox.cx, (bbox.cy+(bbox.h/2))); //rotate object
obj.transform(t); //apply transformation to object

EDIT2：
我想知道如何保存转换，因此您不需要每次使用新转换时都应用它们。Ian 建议element.transform()像这样使用来获得旧的转换： 

element.transform( element.transform() + 's2,2' )
4

1 回答 1

0

这比人们想象的要复杂一些，但是你会为一个矩阵制作动画，它有时会做一些奇怪的事情。

就个人而言，我会使用 Snaps 替代动画方法 Snap.animate() 而不是使用矩阵。首先设置比例，然后构建动画字符串。

就像是..

var triangle2 = p.select("#myShape2").transform('s0.5');

...

Snap.animate(0,90,function( val ) {
  triangle2.transform('r'+ val + ',' + bbox.cx+','+(bbox.cy-(bbox.h/2))+'s0.5')
}, 2000)

jsfiddle

于 2017-04-25T14:16:47.030 回答