Snap.svg：如何倾斜元素？答案

【问题标题】：Snap.svg: How can I skew an element?Snap.svg：如何倾斜元素？
【发布时间】：2017-03-15 15:18:01
【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

标签： javascript svg transform snap.svg

【解决方案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)

【讨论】：

【解决方案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);

【讨论】：