Javascript Snap.svg—；保存以前状态的连续转换

我试图将一些转换作为用户输入对一组元素的反应，我确信我做得不对：

var SVG_WIDTH = window.innerWidth,
    SVG_HEIGHT = window.innerHeight,
    SVG_CENTER_X = Math.floor(SVG_WIDTH / 2),
    SVG_CENTER_Y = Math.floor(SVG_HEIGHT / 2),
    s = Snap(SVG_WIDTH, SVG_HEIGHT),

    obj = new myObj(SVG_CENTER_X, SVG_CENTER_Y);
    obj.drawIt();

function myObj( x, y ) {

    var that = this;

    this.x = x;
    this.y = y;

    this.is_scaled = false;
    this.angle = 0;

    this.g = s.group();

    this.drawIt = function() {
        var a = s.rect(this.x, this.y, 50, 50, 0, 0).attr({'fill':'#E82941'});
        a.appendTo(this.g);      
    };

    this.moveIt = function( dx, dy ) {

        var relative_dx = dx,
            relative_dy = dy;

        switch ( that.angle ) {
            case 0: {
                break;
            }
            case 90: {
                relative_dx = dy;
                relative_dy = -dx;
                break;
            }
            case 180: {
                relative_dx = -dx;
                relative_dy = -dy;
                break;
            }
            case 270: {
                relative_dx = -dy;
                relative_dy = dx;
                break;
            }
        } 

        var old_matrix = that.g.transform().localMatrix,
            new_matrix = old_matrix.translate(relative_dx, relative_dy),
            new_string = new_matrix.toTransformString();

            that.g.animate({'transform':new_string}, 200, mina.linear);   
   };

    this.rotateIt = function( angle ) {
        var old_matrix = that.g.transform().localMatrix,
            new_matrix = old_matrix.rotate(angle, that.x + 25, that.y + 25),
            new_string = new_matrix.toTransformString();

            that.g.animate({'transform':new_string}, 200, mina.linear);

            that.angle = Math.abs((that.angle + angle) % 360);
    };

    this.scaleIt = function() {

        var factor = 2;

        if (that.is_scaled) {
            factor = 0.5;
            that.is_scaled = false;
        } else {
            that.is_scaled = true;
        }

        var old_matrix = that.g.transform().localMatrix,
            new_matrix = old_matrix.scale(factor, factor, that.x + 25, that.y +25),
            new_string = new_matrix.toTransformString();

            that.g.animate({'transform':new_string}, 200, mina.linear);
    };
}

document.onkeypress = function ( e ) {

    switch ( e.charCode ) {
        case 97: { // A
            obj.moveIt(-50, 0);
            break;
        }
        case 100: { // D
            obj.moveIt(50, 0);
            break;
        }
        case 114: { // R
            obj.rotateIt(90);
            break;
        }
        case 115: { // S
            obj.moveIt(0, 50);
            break;
        }
        case 119: { // W
            obj.moveIt(0, -50);
            break;
        }
        case 122: { // Z
            obj.scaleIt(2);
            break;
        }
    }
};

这是一个密码笔：

WASD的翻译效果很好。 缩放效果也很好（以对象中心为原点进行放大/缩小）。 旋转几乎可以很好地工作，但仅在一些缩放（？？）之后

---

矩形应围绕其中心顺时针旋转，从270度旋转到360度时不应出现“跳跃”（现在改为逆时针旋转到0度）。

我个人可能会忘记矩阵，手动控制每个平移/缩放/旋转，并通过一个内置的变换字符串应用，该字符串三合一。你可以在以后更舒服的时候摆弄矩阵。我只是想知道，是否有一种“合适的”方法来制作这种动画。Snap.svg似乎有一些冗余函数。我不知道有任何冗余函数。这刚好够一个人上吊的；）。问题通常来自于人们试图做一些他们不理解的事情（我不是说高人一等），这正是Snap和Raphael使用转换字符串来简化这一过程的原因。因此，我个人的看法是，“正确的”Snap/Raphael方法是构建自己的变换字符串，而不是做矩阵旋转之类的事情。你可能是对的。转换字符串很好处理。连接两个或多个，就这样。字符串的唯一问题是，在每次连接之后，字符串的长度越来越长。为了避免这种情况，您需要拆分旧版本，并“手动”构建新版本。我试图用矩阵来避免这种情况（仿射变换并不是那么难理解）。如果你一开始就创建了它，你就不需要旧的（即你会知道“总”旋转）（您可以存储的最后一个旋转，例如rot 20，新的旋转是+20，所以您只需设置r40。与缩放相同，这样您就可以执行类似element.transform（'t'+newx+'，'+newy+'r'+newrot+s+newscale）的操作。键入内容时，只需注意放入它们的顺序。这样，字符串就不会比每个变换都包含一个的字符串长。