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);

似乎变换矩阵中不支持倾斜。有什么想法吗？

- Marten Zander

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)

- Ian

Answer 2

根据我个人使用Snap进行大量数学动画处理的经验，当需要高性能时，Snap的内置方法非常慢且需要进行大量的字符串操作和循环。最好直接操作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);
    };
});

所以，假设'rect'是您创建的Snap元素的变量名称，要使用此代码，您需要键入：

//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);

- vusiliyK