Snap.svg: Wie kann ich ein Element schiefstellen?

Question

Ich bin neu in Snap.svg und ich versuche, ein einfaches Rechteck zu verdrehen, aber ich kann nicht herausfinden, wie. Ich habe bereits in den Dokumenten gesucht.

Dies ist, was ich habe, so weit:

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

Es scheint, wie Schrägstellung innerhalb der Transformationsmatrix nicht unterstützt wird ..

irgendwelche Ideen?

Answer 1

Snap.svg hat standardmäßig keine Skew-Funktion.

Sie könnten eine benutzerdefinierte Skew-Funktion als Plugin hinzufügen.

Diese Funktion wird von der Mitte aus schräg ausgerichtet. Sie können den bbox Code entfernen, wenn Sie ihn nicht brauchen, er wird 0,0 als Mitte nehmen).

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

Aus meiner persönlichen Erfahrung mit Snap-Verwendung für sehr mathematisch intensive Animationen auf mehreren Elemente zu einem Zeitpunkt, wo Leistung zählt, Snaps in Methoden gebaut sind sehr langsam und viele String-Operationen tun und Schleifen. Es ist besser, direkt die Matrix des DOM-Elements als die Matrix des Snap-Elements zu manipulieren. Im Idealfall würden Sie die Matrix irgendwo gespeichert haben und nur einmal deklariert haben, aber sie jedes Mal zu bekommen, wenn Sie eine Änderung vornehmen, ist auch in Ordnung. Der folgende Code enthält das Skew-Zeug, nach dem Sie fragen. Ich Dinge zu finden sein Weg schneller und bequemer, wenn die Dinge auf diese Weise tun:

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

Also diesen Code zu verwenden, vorausgesetzt, ‚rect‘ ist der Name der Variablen für das Einzelelement, das Sie erstellt haben, müssen Sie Folgendes eingeben:

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