對齊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旋轉和縮放

回答

相關問題