Question

我是Snap.svg的新手，我试图扭曲一个简单的矩形，但我无法弄清楚如何。我已经在文档中搜索过了。

这是我到目前为止所做的：

{{1}}

在变换矩阵中似乎不支持倾斜..

任何想法？

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

根据我自己的经验，一次使用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);
    };
});

因此，要使用此代码，假设＆＃39; rect＆＃39;是您创建的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);

Snap.svg：我如何扭曲元素？

2 个答案: