Question

我正在尝试缩放然后旋转三角形，然后将其转换为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' )

Answer 1

这比人们预期的要复杂得多，但你会想要制作一个矩阵，有时会做一些奇怪的事情。

我个人会使用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

Snap SVG rotate＆amp; amp;规模

1 个答案: