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

ゆがみが変換行列内でサポートされていないように思えが..

任意のアイデア？

Answer 1

Snap.svgにはデフォルトでスキュー機能がありません。

カスタムスキュー機能をプラグインとして追加できます。

この機能は中央から斜めになります。あなたがそれを必要としない場合は、0,0を中心にしてbboxコードを削除することができます）。パフォーマンスの問題は、メソッドに建てられたスナップのは非常に遅く、文字列操作の多くを行う時に複数の要素に非常に数学的に強烈なアニメーション用のスナップを使用して私自身の個人的な経験から、

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要素の行列ではなく、DOM要素の行列を直接操作するほうが優れています。理想的には、行列はどこかに保存され、一度だけ宣言されますが、変更するたびに行列を取得することもできます。次のコードはあなたが求めているスキューを含んでいます。私は物事を行うときに物事がこのような方法より速く、より便利であることを見つける：

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」は、作成したスナップ要素の変数名で、次のように入力し仮定：

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