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에는 기본적으로 포함 된 기울이기 기능이 없습니다.

맞춤식 비대칭 기능을 플러그인으로 추가 할 수 있습니다.

이 기능은 가운데에서 비뚤어집니다. 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 요소의 행렬이 아니라 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); 
    }; 
}); 

그래서이 코드를 사용하기를, 다음을 입력합니다

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