Snap.svg：我如何傾斜元素？

Question

我是Snap.svg的新手，我試圖歪斜一個簡單的矩形，但我無法弄清楚如何。我已經在文檔中搜索。

這是我到目前爲止有：

/* stage */ 
    var s = Snap('#mysvg'); 
    s.clientRect = s.node.getBoundingClientRect(); 
    s.width = s.clientRect.width; 
    s.height = s.clientRect.height; 
    s.center = { 
     "left" : s.width/2, 
     "top" : s.height/2, 
    }; 

    /* rectangle */ 
    var rect = {}; 
    rect.width = 120; 
    rect.height = 230; 
    rect.borderRadius = 10; 
    rect = s.rect(s.center.left, s.center.top,rect.width,rect.height, rect.borderRadius); 

    rect.transformMatrix = new Snap.Matrix(); 
    rect.transformMatrix.scale(1,0.86062); 
    rect.transformMatrix.rotate(30); 
    // rect.transformMatrix.skew(30); 
    rect.transform(rect.transformMatrix); 

好像歪斜不變換矩陣內的支持..

什麼想法？

Answer 1

Snap.svg沒有默認包含的傾斜功能。

您可以添加一個自定義傾斜函數作爲插件。

此功能將偏離中心。如果你不需要它，你可以刪除bbox代碼，它將以0,0爲中心）。

jsfiddle

Snap.plugin(function(Snap, Element, Paper, global) { 

    Element.prototype.skew = function(angleX, angleY) { 

     var bbox = this.getBBox(); 

     var m = new Snap.Matrix(1, Snap.rad(angleY), Snap.rad(angleX), 1, 0, 0); 

     var dx = m.x(bbox.cx, bbox.cy) - bbox.cx; 
     var dy = m.y(bbox.cx, bbox.cy) - bbox.cy; 

     m.translate(-dx, -dy) 
     this.transform(m); 
    }; 
}); 

var s = Snap("#svg"); 

var block = s.rect(100, 100, 100, 100); 
block.skew(90,0); // try (0,90 for skewY) 

Answer 2

從使用快照，以便在多個元素非常數學激烈動畫的時間，在性能問題我自己的親身經歷，捕捉內置的方法是非常緩慢的，做了很多的字符串操作並循環。它更好地直接操作DOM元素的矩陣，而不是Snap元素的矩陣。理想情況下，你可以將矩陣存儲在某個地方，並且只聲明一次，但每次進行更改時都會得到它。以下代碼包含您要求的歪斜情況。我覺得事情是方式更快，更方便的在做事情時，這樣說：

Snap.plugin(function(Snap, Element, Paper, global) { 


    Element.prototype.getMatrix = function() { 
     return this.node.transform.baseVal.getItem(0).matrix; 
    }; 

    //angles in degrees 
    Element.prototype.skew = function(angleX, angleY) { 
     var m = this.getMatrix(); 
     m.b = Math.tan(angleY*Math.PI/180) 
     m.c = Math.tan(angleX*Math.PI/180) 
    }; 

    Element.prototype.translate = function(x, y) { 
     var m = this.getMatrix(); 
     m.e = x; 
     m.f = y; 
    }; 

    Element.prototype.scale = function(x, y) { 
     var m = this.getMatrix(); 
     m.a = x; 
     m.d = y; 
    }; 

    Element.prototype.rotate = function(degrees) { 
     var m = this.getMatrix(); 
     var a = degrees*Math.PI/180; 
     m.a = Math.cos(a); 
     m.b = Math.sin(a); 
     m.c = -Math.sin(a); 
     m.d = Math.cos(a); 
    }; 
}); 

因此，要使用此代碼，假設「矩形」是您創建的快照元素的變量名，您可以鍵入：

//sets transform to x, y = 100, 100 
rect.translate(100, 100); 

// scales x to 1 and y to 0.5 
rect.scale(1, 0.5); 

//skews 30 degrees horizontally and 90 degrees vertically 
rect.skew(30, 90);