对齐SVG旋转和缩放

我想缩放，然后旋转一个三角形，然后将其转换为Snap SVG中的给定点。
我想旋转它的顶部而不是中心的三角形，所以我可以建立像馅饼一样的东西。
所以我想我先缩放，然后旋转，稍后翻译。对齐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不在三角形的中心。
在我的本地设置上。
奇怪的是，只是旋转没有缩放工作正常，但缩放，然后roation总是似乎有点关闭在y轴，三角形不停留在旋转点。
任何想法，我可以解决这个问题？

编辑：
好，我找到了解决方案，这要归功于网络，你是正确的，scaleing的中心是非常重要的，而且
我认为这是期运用对象的中心，但它是左上角。我调整了它
和现在的作品马丽娟：

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：
我想知道如何保存改造，使您不必每次使用新的转换时间应用它们。伊恩建议使用element.transform()像这样让老转变：

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

来源

2017-04-23 Chill3er

我不清楚你是什么样的影响后。我怀疑你的缩放中心有什么不对劲，也许你正在把三角形的中心放大，然后缩放它。在缩放之后你是不是想要一个三角形的中心（如果它没有从它的中心缩放，就像在这种情况下那样）。旋转后您可能还想玩缩放。 – Ian

我想缩放三角形，然后imagen，你把一个pin在一个 – Chill3er

*对不起hitted上面的评论输入。 Imagen通过三角形的一角放置一个销钉，然后缩放并旋转它，这样一个“固定”的角落应该保持在原来的位置。但它以某种方式不会保持“固定”并改变位置。我发现这个缩放是在旋转之前发生的：[Snap Matrix]（http://svg.dabbles.info/snaptut-matrix）我只是不知道我需要改变，所以我可以保持旋转/缩放角落“固定”。 – Chill3er

这稍微复杂得多，人们所期望的，但你会被动画化矩阵，做一些奇怪的事情有时。

就个人而言，我会使用捕捉替代动画方法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-25 14:16:47 Ian

我也想过使用'Snap.Animate（）'，但是我发现Matrix更好的可编辑性，将矩阵变成动画字符串不是困难，但反过来并不是那么容易。这就是为什么我要尊重矩阵。 – Chill3er

对齐SVG旋转和缩放

回答

相关问题